HTML5 Canvas學習筆記之詳解弧線的繪製

2021-07-09 21:27:15 字數 1856 閱讀 1311

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...