使用canvas元素（一）

//在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元素作为源