HTML5 Canvas畫布的使用方法

2021-07-05 21:08:00 字數 476 閱讀 9696

作用——利用html5中提供的畫布功能,通過canvas實現各種圖形。

注意:js事件不能繫結到畫布中的圖形上,只能為元素繫結事件。

1、html頁面中使用定義畫布

2、使用js獲取canvas元素,並呼叫getcontext("2d")方法得到畫布物件

3、使用畫布提供的api方法繪製圖形

4、繪製圖形的方法

繪製矩形:

fillrect(x,y,width,height)--繪製實心矩形

x和y--矩形左上角的座標值

width和height--矩形的寬與高

strokerect(x,y,width,height)--繪製空心矩形

屬性含義同上

clearrect(x,y,width,height)--清除制定矩形區域

屬性含義同上

小案例:

HTML5 canvas畫布 學習例項

如圖 如下 js 如下 tankgame2.js 我的坦克hero function hero x,y,direct 右移 this.moveright function 下移 this.movedown function 左移 this.moveleft function 畫坦克 function...

前端基礎(二十九 HTML5 canvas畫布)

例子html5中新增了標籤,標籤用於在網頁上繪製圖形。畫布是乙個矩形的區域,它擁有多種繪製路徑 圓形 字元以及新增影象的方法。stroke 繪製已定義的路徑 beginpath 起始一條路徑,或重置當前路徑 moveto 把路徑移動到畫布中的指定點,不建立線條 closepath 建立從當前點回到起...

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法,方法定義如 arc x,y,radius,startangle,endangle,countercl...