HTML5 canvas畫布 學習例項

如圖：

**如下：

//我的坦克hero

function hero(x,y,direct)
//右移
this.moveright=function()
//下移
this.movedown=function()
//左移
this.moveleft=function()
}//畫坦克
function drawtank(tank)else if(tank.direct==2)
cxt.closepath();
cxt.stroke(); 
break;
case 1:
case 3:
//畫坦克
cxt.fillstyle="#ded284";
cxt.fillrect(tank.x,tank.y,30,5);
cxt.fillrect(tank.x,tank.y+15,30,5);
cxt.fillrect(tank.x+5,tank.y+6,20,8);
cxt.fillstyle="#ffd972";
cxt.arc(tank.x+15,tank.y+10,4,0,math.pi*2,true);
cxt.fill();
//畫炮筒
cxt.strokestyle="#ffd972";
cxt.linewidth=2;
cxt.beginpath();
cxt.moveto(tank.x+15,tank.y+10);
if(tank.direct==3)else if(tank.direct==1)
cxt.closepath();
cxt.stroke(); 
break;}}

如圖：

按 wasd 上下左右移動

**如下：

如圖：

**如下：

HTML5 Canvas畫布的使用方法

作用 利用html5中提供的畫布功能，通過canvas實現各種圖形。注意 js事件不能繫結到畫布中的圖形上，只能為元素繫結事件。1 html頁面中使用定義畫布 2 使用js獲取canvas元素，並呼叫getcontext 2d 方法得到畫布物件 3 使用畫布提供的api方法繪製圖形 4 繪製圖形的方...

前端基礎（二十九 HTML5 canvas畫布）

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

Html5 Canvas學習之路（三）

合成是指如何精細控制畫布上物件的透明度和分層效果。有兩個屬性可以控制合成操作 globalalpha canvas屬性用來表示透明度，它的預設值為1.0 完全不透明 並且可以設定從0.0到1.0的值，這項canvas屬性必須在圖形繪製之前設定。globalcompositeoperation屬性用來...