2012-03-07 150 views
2

如何调整已经在画布中绘制的图像大小?html5画布图像调整大小

我想这没有运气(图片中展现,但它不调整):

var drawBall = function(mouseX, mouseY){ 
    ballimg = new Image(); 
    ballimg.onload = function(){ 
     ctx.drawImage(ballimg, mouseX-25, mouseY-25); 
     ballimg.height = 5; 
     throwed = true; 

    }; 
    ballimg.src = "ball2.png"; 
}; 

回答

3

你无法改变其在画布上绘制的对象。

你需要做的是重绘你的对象。

清除旧球所在的环境ctx.clearRect(x,y,x2,y2) 并绘制新尺寸的新球。

如果你想在画布上动画的东西。你这样做的方式是跟踪所有的对象,并为每一帧重绘画布(每一个对象)。

+0

如何提高重绘速度? – dario111cro 2012-03-07 16:55:08

+1

这取决于你想要的。如果你想重绘每一秒左右,你可以使用setInterval函数http://www.w3schools.com/jsref/met_win_setinterval.asp或者你可以手动触发重绘鼠标点击事件 – 1b0t 2012-03-07 17:13:32

+0

也最好使用requestAnimationFrame比setInterval获得更好的性能。这里是由保罗爱尔兰人制作的polyfill ... http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ – 2013-07-26 19:54:19