HTML 5 <canvas> 標(biāo)簽定義和用法
<canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像。
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
實(shí)例
如何通過 canvas 元素來顯示一個(gè)紅色的矩形：
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
< canvas>定義圖形 基于狀態(tài)進(jìn)行繪制的
大多數(shù) Canvas 繪圖 API 都沒有定義在 < canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個(gè)“繪圖環(huán)境”對象上
canvas.width canvas.height //指定canvas的寬高
canvas.getContext("2d"); //返回繪制的環(huán)境
context.moveTo(10,10) //從（10，10）開始畫
context.lineTo(100,100) //從（10，10）開始畫，畫到（100，100）
context.stroke() //開始繪制（線條）
context.lineWidth=3 //設(shè)置線條的寬度
context.strokeStyle="#f00" 設(shè)置線條的顏色 stroke筆畫的意思
context.fillStyle="rgb(255,0,0)"；context.fill() //著色，，填充的顏色（顏色塊）
context.beginPath(); //定義一個(gè)新的路徑
context.closePath(); //用在路徑結(jié)束，
如果繪制的路徑不是封閉的則會自動封閉起來，不寫closrPath則不會封閉
//從坐標(biāo)（20，30）開始，畫一個(gè)64*36的矩形
context.fillRect(20,30,64,36); //rect矩形
//繪制弧和圓
context.arc(
centetx,centery,radius, //圓心坐標(biāo)及半徑
startingAngle,enddingAngle, //從哪個(gè)弧度值開始，結(jié)束于哪個(gè)弧度值
anticlockwise=false //可選，，表示以順時(shí)針開始繪制還是逆時(shí)針。
默認(rèn):順時(shí)針。。true以逆時(shí)針繪制
)
//調(diào)用arc函數(shù)
//以(300,300)為圓心，200為半徑畫弧,從0畫到1.5個(gè)PI
context.arc(300,300,200,0,1.5*Math.PI)
//全局變量
WINDOW_WIDTH=1024; WINDOW_HEIGHT=768;
//調(diào)用全局變量
canvas.width=WINDOW_WIDTH;
//render()函數(shù) render(context);
renderDigit(0,0,parseInt(hours/10),ctx)
總結(jié)
以上所述是小編給大家介紹的HTML5 Canvas標(biāo)簽及基本使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
