canvas翻譯過來呢就是畫布
所以canvas的作用就是把網頁當成一張畫布,在其中畫畫——說實話h5中最令我感興趣的就是canvas了。
id="canvas"
style="height:100%">
當前瀏覽器不支援canvas,請更換瀏覽器後再試
canvas>
這裡先說canvas的幾個屬性:
window.onload=function()
acr() ,圓弧和圓角矩形
context.arc(centerx,centery,radius,startingangle,endingangle,anticlockwise=false)
弧度永遠是從順時針開始0,0.5pi ,1.0pi, 1.5pi, 2pi,不管anticlockwise等於多少,這些值永遠不變。
window.onload=function
()
執行截圖
由此可見,1.5pi永遠是上方的點
利用圓弧繪製圓角矩形
利用控制點(x1,y1),(x2,y2)。起始點不一定是(x0,y0),終點也不一定是(x2,y2)
可以嘗試改變radius的值
貝塞爾bezier二次曲線
context.moveto(x0,y0)
context.quadraticcurveto(x1,y1,x2,y2)
指定起始點(x0,y0),終止點(x2,y2),控制點(x1,y1)
貝塞爾曲線和arcto的含義其實類似,但是這裡的起始點和終止點就是真正的起始點和終止點,所以畫出的並不是真正的圓弧,而是曲線。
可以上上檢視,這裡形象的展示了quadratic的用法
貝塞爾三次曲線
擁有兩個控制點,可以繪製花瓣、波浪效果等
context.moveto(x0,y0)
context.beziercurveto(x1,y1,x2,y2,x3,y3)
可以上檢視演示
該文章是學習了慕課網上canvas繪圖詳解而總結的學習筆記
感謝老師!
我的**在
在其中展示了如何使用這些canvas基本屬性,同時展示了乙個實現繪製一片星空效果:
HTML5 canvas畫布 學習例項
如圖 如下 js 如下 tankgame2.js 我的坦克hero function hero x,y,direct 右移 this.moveright function 下移 this.movedown function 左移 this.moveleft function 畫坦克 function...
Html5 Canvas學習之路(三)
合成是指如何精細控制畫布上物件的透明度和分層效果。有兩個屬性可以控制合成操作 globalalpha canvas屬性用來表示透明度,它的預設值為1.0 完全不透明 並且可以設定從0.0到1.0的值,這項canvas屬性必須在圖形繪製之前設定。globalcompositeoperation屬性用來...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法,方法定義如 arc x,y,radius,startangle,endangle,countercl...