摘要：

• 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)復制代碼