一、canvas繪圖環(huán)境
<canvas id="canvas" width="800" height="800">該瀏覽器不支持canvas元素</canvas>
在<body></body>中添加這段代碼相當(dāng)于創(chuàng)建了一塊畫布短条，要使用<canvas>元素恭朗，必須為其設(shè)置畫布大小，寫在<canvas></canvas>標(biāo)簽內(nèi)的內(nèi)容將在使用的瀏覽器不支持<canvas>時顯示哥攘。想要繪圖剖煌，還必須獲得繪圖上下文，
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
二逝淹、路徑繪制
- moveTo（x,y） 將繪制坐標(biāo)移到（x,y）,但不進(jìn)行畫線耕姊。
lineTo（x,y）從上一點開始，繪制直線到（x,y）栅葡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>畫線</title>
<style type="text/css">
#canvas
{
display: block;
border:1px solid #ccc;
margin:20px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width="600";
canvas.height="600"
var context=canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(500,500);
context.lineTo(100,500);
context.lineWidth=5; //設(shè)置畫線寬度
context.strokeStyle="#058"; //設(shè)置畫線的顏色
context.stroke(); //正式進(jìn)行畫線
}
</script>
</body>
</html>
效果如圖所示：
image.png
如果想連接圖形的首尾茉兰，繪制一個封閉的圖形，有兩種做法
- 再使用context.lineTo(start欣簇，end);連接圖形的首尾坐標(biāo)规脸。
- 使用beginPath()和closePath()也將實現(xiàn)同樣的效果。對于實現(xiàn)封閉圖形很有用熊咽。
context.beginPath();
context.moveTo(100,100);
context.lineTo(500,500);
context.lineTo(100,500);
context.closePath();
- arc（x,y,radius,startAngle,endAngle,direction）以（x,y）為圓心莫鸭，畫一條弧線。direction為true為逆時針方向繪制横殴，為false表示為順時針繪制被因，如果不進(jìn)行設(shè)定，默認(rèn)為true衫仑。無論順時針還是逆時針梨与，正右方都為0弧度，正下方為 PI/2,正左方為PI.正上方為PI/2*3;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>畫線</title>
<style type="text/css">
#canvas
{
display: block;
border:1px solid #ccc;
margin:20px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width="600";
canvas.height="600"
var context=canvas.getContext("2d");
context.arc(200,200,50,0,Math.PI,false)
context.lineWidth=5;
context.strokeStyle="#058";
context.stroke();
}
</script>
</body>
</html>
效果如圖所示：
image.png
- rect(x,y,width,height):從點x,y繪制一個矩形
使用方法和上面的類似文狱，不過多介紹粥鞋。
