//在Dom中找到canvas元素然后调用HTMLCanvasObject上的getContext方法
var ctx=document.getElementById("canvas").getContext("2d");
//使用fillRect方法绘制实心矩形 strokeReact 是空心的矩形
ctx.fillRect(10,10,50,50)
var offset=10;
var size=50;
var count=5;
var fillColors=["black","grey","lightgrey","red","blue"];
var strokeColors[]
for(var i=0;i<count;i++){
//实心的颜色值
ctx.fillStyle=fillColors[i];
//空心的颜色值
ctx.strokeStyle=fillColors[i];
ctx.fillRect(i*(offset+size)+offset,offset,size,size);
ctx.strokeRect(i*(offset+size)+offset,(2*offset)+size,size,size);
ctx.clearRect(i*(offset+size)+offset,offset,size,size);
}
//添加圆形渐变颜色
var grad=ctx.createRadialGradient(250,70,40,200,60,100);
//线性渐变颜色
var grad=ctx.createLinearGradient(10,10,60,60);
grad.addColorStop(0,"red");
grad.addColorStop(0.5,"white");
grad.addColorStop(1,"black");
ctx.fillStyle=grad;
ctx.fillRect(150,70,100,100);
save和restore保存和恢复绘制状态
使用drawImage方法,指定img,canvas,或者video元素作为源