canvas基本绘制对象

目录

 绘制画布

设置画布 

 绘制圆形

绘制矩形填充渐变色 

绘制文字及文字样式

 绘制画布

<canvas id="canvas" width="800" height="600"></canvas>

设置画布 

//获得画布元素
    
var canvas=document.getElementById('canvas');

var ctx=canvas.getContext('2d');

ctx.lineWidth=3;

// ctx.rect(20,20,100,100);//ctx.rect(x,y,w,h)

ctx.fillStyle='purple';//填充色

ctx.strokeStyle="green";

 绘制圆形

 //绘制圆形
    
ctx.arc(300,350,100,0,8);//x,y,半径，起始角度,弧长(Math.PI*2表示圆，Math.PI是半圆)，true或false(true是顺时针，false是逆时针)

ctx.stroke();

绘制矩形填充渐变色 

var grd=ctx.createLinearGradient(0,90,0,0);//x0开始点的x轴(沿x轴逆向渐变)，开始点的y轴(沿y轴逆向渐变)，结束点的x轴(沿x轴顺向渐变)，结束点的y轴(沿y轴顺向渐变)

grd.addColorStop(0,'red');

grd.addColorStop(1,'blue');

ctx.fillStyle=grd;

ctx.fillRect(10,10,200,200);

绘制文字及文字样式

ctx.font="50px '平方'";//文字样式

ctx.shadowColor="black";//阴影颜色

ctx.shadowOffsetX=5;//设置字体阴影x轴的颜色

ctx.shadowOffsetY=5;//设置阴影y轴的颜色

ctx.shadowBlur=10;//设置字体模糊度

ctx.fillText('hey bro',300,50);//设置实心字体（text,x,y,maxWidth）

ctx.strokeText('hey bro',300,200);//设置空心字提（text,x,y,maxWidth）