摘要：

• canvas:默认宽高为300*150，需用canvas的API定义其宽高
• 绘画路径以beginPath()开始,以closePath()结束
• 常用方法fill()、stroke()、rect()、arc()、text()、lineTo()、moveTo()

以下为代码： var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

ctx.beginPath();
ctx.lineWidth = 3;
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.lineTo(100,30);
ctx.closePath();
ctx.stroke();ctx.beginPath();
ctx.rect(0,130,200,100);
ctx.fillStyle="green";
ctx.fill();
ctx.closePath()ctx.beginPath();
var g=ctx.createRadialGradient(300,300,10,400,350,50);
g.addColorStop(0,"green");
g.addColorStop(0.5,"blue");
g.addColorStop(1,"red");
ctx.fillStyle=g;
ctx.arc(300,300,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();ctx.beginPath();
ctx.font="30px Arial";
ctx.strokeText("你好,我是canvas绘画字体",300,60);var grd=ctx.createLinearGradient(300,100,500,100);   //createLinearGradient(starx,stary,endx,endy)
grd.addColorStop(0,"green");
grd.addColorStop(0.5,"blue");
grd.addColorStop(1,"red");ctx.beginPath();
ctx.font="30px Arial";
ctx.fillStyle=grd;
ctx.fillText("你好,我是canvas绘画字体",300,100);  //fillText("文字",起点x,起点y)复制代码