Html5中canvas的一些使用
最近在研究HTML5,發現其中的canvas用途很廣。不但可以繪製圖形,還可以製作圖片線性漸變,而且還能渲染文字做成特效。覺得挺有趣,於是把學習的內容記錄起來了。
1.繪製圓形圖
Html程式碼: <canvas id="roundness" width="600" height="300">
</canvas>
js程式碼: var canvas = document.getElementById("roundness");
var context = canvas.getContext("2d");
context.strokeStyle = "aqua";//圓形的顏色
context.lineWidth = "2";
context.beginPath();
context.arc(100,100,40,0,2*Math.PI); //40此值設定圓形的大小
context.stroke();
效果如下圖:
2.繪製五角星
Html程式碼: <canvas id="canvasFive" width="600" height="250">
</canvas>
js程式碼: var canvas = document.getElementById("canvasFive");
var context = canvas.getContext("2d");
context.beginPath();
//設定是個頂點的座標,根據頂點制定路徑
for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+200,
-Math.sin((18+i*72)/180*Math.PI)*50+200);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*20+200,
-Math.sin((54+i*72)/180*Math.PI)*20+200);
}
context.closePath();
//設定邊框樣式以及填充顏色
context.lineWidth="3";
context.fillStyle = "red";
context.strokeStyle = "wheat";
context.fill();
context.stroke();
效果如下圖:
3.繪製矩形
Html程式碼: <canvas id="canvasFour" width="600" height="200">
</canvas>
js程式碼:
var canvas = document.getElementById("canvasFour");
var context = canvas.getContext("2d");
context.rect(10,10,150,150);
context.lineWidth = 2;
context.fillStyle = "cyan"; //設定填充顏色
context.strokeStyle = "#F5270B"; //邊框顏色
context.fill();
context.stroke();
效果如下圖:
4.製作圖片顏色線性漸變
Html程式碼: <canvas id="change" width="500" height="300">
</canvas>
js程式碼: var canvas = document.getElementById("line");
var context = canvas.getContext("2d");
var grd = context.createLinearGradient( 50 , 250, 500 , 800 );
grd.addColorStop(0,"white"); //設定顏色
grd.addColorStop(0.25,"blue"); //設定顏色
grd.addColorStop(0.5,"yellow"); //設定顏色
grd.addColorStop(0.75,"purple"); //設定顏色
grd.addColorStop(1,"black");
context.fillStyle = grd;
context.fillRect(50,250,500,800);
效果如下圖:
5.畫一條直線,長度可選。
Html程式碼: <canvas id="canvas" width="600" height="200">
</canvas>
js程式碼:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,100);
context.lineTo(600,100);
context.lineWidth = 2;
context.strokeStyle = "#F5270B";
context.stroke();
效果如下圖: