首先应该写有一个画布，定义你的画布大小，所做的内容将在这块画布上

<canvas id="cvs" width="800" height="600">你的浏览器不支持canvas</canvas> 

用于在画布上绘制文本、线条、矩形、圆形等
var c=document.getElementById("myCanvas");

getContext() 方法提供了用于在画布上绘图的方法和属性
 

 1.绘制一个蓝色的矩形

var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);

2.定义一个从黑到白的渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

canvas