html5畫布基礎

canvas 元素用於在網頁上繪製圖形。

 

什麼是canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域，您能夠控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

建立畫布：

向 HTML5 頁面添加 canvas 元素。

規定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

---

陰影：
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.shadowBlur=10;----陰影的模糊級別 
ctx.shadowOffsetX=20;----陰影偏移像素 
ctx.shadowColor="black";---陰影 
ctx.fillStyle="blue"; 
ctx.fillRect(20,20,100,80);

---

線條：
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); ctx.beginPath(); 
ctx.lineWidth=10;----設置線條粗細 
ctx.lineCap="round";---round(圓形的結束帽)/square(正方形結束帽) 
ctx.moveTo(20,20); 
ctx.lineTo(20,200);
ctx.stroke();  
ctx.lineJoin="round";---當兩條線條交匯時，建立邊角類型（round-圓角/bevel-斜角/miter-尖角）
ctx.miterLimit=5;---設置或返回最大斜接長度。

---

矩形：

ctx.clearRect(20,20,100,50);---清空矩形context.quadraticCurveTo(控制點x,控制點y,結束點x,結束點y);---二次貝塞爾曲線
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);---三次貝塞爾曲線