目录
绘制画布
设置画布
绘制圆形
绘制矩形填充渐变色
绘制文字及文字样式
绘制画布
<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）
