在HTML5画布内绘制图像的一部分
如果要在画布内绘制图像的一部分,则图像首次加载功能仅在图像首次加载到浏览器时才会触发一次。
让我们来看一个例子:
$(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); });