本節(jié)將用例子講解一下用canvas繪制基礎(chǔ)形狀
前言
<canvas>是HTML5的新增元素脱柱，可以通過javascript在其中繪制圖形俺猿。
<canvas>元素
<canvas id="myCanvas" width="300" height="300">你的瀏覽器也太老了.</canvas>
<canvas>標(biāo)簽只有兩個(gè)屬性 width 和 height底哥，默認(rèn)寬高是300px和150px。我們可以通過css來控制大小，如果css定義的尺寸和畫布的初始大小比例不一致，會(huì)出現(xiàn)拉伸或者壓縮的情況矩肩。
渲染上下文
//獲取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = null;
//檢查是否支持canvas
if(canvas.getContext){
? ? ?ctx = canvas.getContext('2d);
}else{
? ? ? ?alert('你的瀏覽器也太老了');
}
繪制矩形
canvas只支持一種原生的圖形繪制：矩形。canvas的默認(rèn)填充顏色都是黑色肃续。繪制矩形api有三種方式：
//繪制一個(gè)填充的矩形
fillRect(x, y, width, height);
//繪制一個(gè)矩形的邊框
strokeRect(x, y, width, height);
//清除指定矩形區(qū)域
clearRect(x, y, width, height);
//示例1
//繪制了一個(gè)邊長是200px的正方形
ctx.fillRect(50,50,200,200);
//從正方形的中心擦除了一個(gè)100x100px的正方形
ctx.clearRect(100,100,100,100);
//在擦除區(qū)域內(nèi)生成了80x80px的正方形邊框
ctx.strokeRect(110,110,80,80);
繪制路徑
繪制路徑的api有：
//新建一條路徑
beginPath();
//移動(dòng)到指定位置
moveTo(x, y);
//繪制一條從當(dāng)前位置到指定位置的直線
lineTo(x, y);
//閉合路徑之后圖形繪制命令重新指向到上下文中
closePath();
//通過線條來繪制圖形
stroke();
//填充路徑
fill();
//圓弧 繪制一個(gè)圓心在(x, y)半徑是radius的圓弧黍檩，anticlockwise為繪制方向，默認(rèn)是順時(shí)針
arc(x, y, radius, startAngle, endAngle, anticlockwise)
//示例2
//開始繪制
ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2,true);//繪制臉
ctx.moveTo(135,100);
ctx.arc(100,100,35,0,Math.PI,false);//繪制嘴始锚，順時(shí)針繪制
ctx.moveTo(85,85);
ctx.arc(80,85,5,0,Math.PI*2,true);//繪制左眼
ctx.moveTo(125,85);
ctx.arc(120,85,5,0,Math.PI*2,true);//繪制右眼
ctx.stroke();
//示例3
//繪制填充三角形
ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(30,130);
ctx.lineTo(130,130);
ctx.fill();
//繪制描邊三角形
ctx.beginPath();
ctx.moveTo(40,30);
ctx.lineTo(140,30);
ctx.lineTo(140,130);
ctx.closePath();
ctx.stroke();
貝塞爾曲線和二次貝塞爾曲線
//繪制貝塞爾曲線刽酱，c1x,c1y為控制點(diǎn)，x,y為結(jié)束點(diǎn)
quadraticCurveTo(c1x, c1y, x, y);
//繪制二次貝塞爾曲線瞧捌，c1x,c1y為控制點(diǎn)一棵里，c2x,c2y為控制點(diǎn)二，x,y為結(jié)束點(diǎn)
bezierCurveTo(c1x, c1y, c2x, c2y, x, y);
//示例4
ctx.beginPath();
ctx.moveTo(100,40);
ctx.quadraticCurveTo(40,40,160,160)
ctx.stroke();
//示例5 二次貝塞爾曲線
ctx.beginPath();
ctx.moveTo(100,40);
ctx.bezierCurveTo(200,40,100,200,250,250);
ctx.stroke();
