您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何在HTML5中使用Canvas標(biāo)簽,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
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)境”對(duì)象上
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é)束, 如果繪制的路徑不是封閉的則會(huì)自動(dòng)封閉起來,不寫closrPath則不會(huì)封閉 //從坐標(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)
上述內(nèi)容就是如何在HTML5中使用Canvas標(biāo)簽,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。