第一篇簡書獻(xiàn)給<canvas>,作為一個(gè)自我督促,以下效果也可通過CSS3實(shí)現(xiàn)
<canvas></canvas>標(biāo)簽提供一個(gè)容器，可以用腳本在其中作圖
步驟一：在html中寫入<canvas id=“”></canvas>；
步驟二：在javascript中獲取對(duì)象：
var canvas = document.getElementById("id");
var context = canvas.getContext("2d");
步驟三：創(chuàng)意時(shí)刻
注：畫板的默認(rèn)長寬是300px*150px，如需改變需要利用js進(jìn)行相關(guān)的調(diào)整
繪制矩形：
context.fillRect(x,y,width,height); ?//填充
strokeRect(x,y,width,height); ?//描邊
context.fillStyle = "red"; ?//填充顏色
context.strokeStyle = "blue"; ?//描邊顏色
context.fillStyle = "rgba(255,0,0,0.2)"; ?//設(shè)置填充透明度
context.strokeStyle = "rgba(255,0,0,0.2)"; ?//設(shè)置描邊透明度
繪制圓?。?/p>
context.beginPath();
context.arc(x, y, radius, starAngle,endAngle, anticlockwise);
context.closePath();
context.fill();
其中radius是半徑，starAngle是開始角度，endAngle是結(jié)束角度，anticlockwise中true或false隨便用，不設(shè)置style默認(rèn)為黑色填充；方便起見，每做一個(gè)圓弧設(shè)置一個(gè)context.beginPath()和context.closePath()
繪制直線
context.moveTo(x,y); ?//設(shè)置起點(diǎn)
context.lineTo(x,y) ?//設(shè)置終點(diǎn)
context.stroke();
漸變
1.線性漸變
var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd); ?//漸變開始和結(jié)束坐標(biāo)
lg.addColorStop(offset,color); ?//設(shè)置（0~1）之間顏色的偏移量
context.fillStyle =lg;
context.fillRect(x, y, width, height);
2.徑向漸變
var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
rg.addColorStop(offset,color);
context.fillStyle = rg;
context.beginPath();
context.arc(xStart,yStart, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();
呈現(xiàn)的效果是一個(gè)小球
