Question

最近我正在尝试动画或说使用javascript和HTML5移动对象：但是我被卡住了，有人能告诉我我的代码有什么问题：

javascript代码（以下代码中的错误）：

var canvas = document.getElementById('my-first');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
    context.drawImage(imageObj,0,0,360,240);
                             };

imageObj.src = 'img/bakshi.jpg';
imageObj.style.position= 'relative'; 
imageObj.style.left = '0px'; 

function moveRight(){
    imageObj.style.left = parseInt(imageObj.style.left)+10+'px';
                };

HTML5代码：

**
“我的实验”

<canvas id="my-first" width="360" height="240">
 your browser doesn't support canvas
</canvas>

<script src="file.js"></script> 
<audio src="i_am_bakshi.mp3" controls autoplay> </audio>
<input type="button" value="Click Me" onclick="moveRight();" /> 
</body>
</html>

**

Answer 1

您的错误是您的图片不是DOM对象，并且您尝试使用DOM样式移动它。相反，您必须使用更新的坐标调用drawImage（）。

var X = 0
function moveRight(){
  X += 10;
  context.drawImage(imageObj,X,0,360,240);
}

Answer 2

您不应该使用样式移动图像，事实上，您将其绘制到画布中。

你应该把它画到另一个位置：

context.drawImage(imageObj,parseInt(imageObj.style.left)+10,0,360,240);

Canvas图像对象不随style.left一起移动

2 个答案: