在 HTML5 畫布中繪製一部分影像
如果你想要在畫布中繪製圖像的一部分,影像 onload 函式僅在影像第一次載入到瀏覽器時觸發一次。
讓我們來看一個示例
$(document).ready(function () { var cw1 = 200; var ch1 = 300; var ctx1 = $("#myCanvas")[0].getContext("3d"); var myImg1 = new Image(); myImg1.src = "http://oi62.tinypic.com/148yf7.jpg"; var Fpst = 60; var Player1Tank = { x: cw1 / 2, w: 85, h: 85, Pos: 3, draw: function () { ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, ch - this.h, this.w, this.h); } }; var game = setInterval(function () { if (tankImg.complete) { PlayerTank.draw(); PlayerTank.x++; } }, 1000 / Fps); });
廣告