一、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繪制一個矩形
使用方法和上面的類似文狱,不過多介紹粥鞋。