canvas画布初试(一)

画布创建
<canvas id="myCanvas" width="300" height="300"></canvas>

 矩形

var c=document.getElementById("myCanvas");
var ct=c.getContext("2d");
ct.rect(20,20,120,120);//(xstart,ystart,xend,yend)
ct.lineWidth=5;
ct.stroke();//矩形
三角形
ct.beginPath();
ct.moveTo(20,20);
ct.lineTo(120,120);
ct.lineTo(20,120);
ct.closePath();//闭合图形
ct.stroke();//三角形

五角星
ct.beginPath();
ct.fillStyle="white";
ct.moveTo(99,40);
ct.lineTo(130,140);
ct.lineTo(60,80);
ct.lineTo(140,80);
ct.lineTo(70,140);
ct.closePath();
ct.fill();//填充五角星

ct.arc(70,70,50,0,2*Math.PI);//圆形

渐变
var std=ct.createLinearGradient(20,20,120,20);//(xstart,ystart,xend,yend)
std.addColorStop(0,"olive");//(中止点,颜色)
std.addColorStop(0.25,"maroon");
std.addColorStop(0.5,"aqua");
std.addColorStop(0.75,"fuchsia");
std.addColorStop(0.25,"teal");

ct.strokeStyle=std;
ct.beginPath();
ct.strokeRect(20,20,120,60);

ct.fillStyle=std;
ct.beginPath();//新开画布取消两者间的联系
ct.fillRect(20,100,120,60);

ct.beginPath();
ct.arc(60,220,40,0,2*Math.PI);
ct.stroke();

var ste=ct.createLinearGradient(160,180,260,180);
ste.addColorStop(0,"olive");
ste.addColorStop(0.25,"maroon");
ste.addColorStop(0.5,"aqua");
ste.addColorStop(0.75,"fuchsia");
ste.addColorStop(0.25,"teal");
ct.fillStyle=ste;
ct.beginPath();
ct.arc(210,220,40,0,2*Math.PI);
ct.fill();//渐变色


原文链接:加载失败,请重新获取