我想在 html5 Canvas 上下文中使用 Sprite 。
我想用鼠标拖动它..所以显示区域在拖动鼠标时会发生变化。
它应该看起来像一个宽度为 21 高度为 90 的窗口，其中只有一部分 Sprite 可见。当我向下或向上拖动 Sprite 时，我希望可见部分发生变化。
我以为我可以用 drawImage (slice) 方法来做到这一点，但它并不像我想要的那样工作......
你能帮帮我吗？
<html>
<head>
<script type="text/javascript">
var y = 30;
var canvas;
var context;
var imageHours;
function clearClock(context) {
context.clearRect(0, 0, 300, 500);
}
function init(){
canvas = document.getElementById("uhr");
context = canvas.getContext("2d");
imageHours = new Image();
imageHours.src = "07.png";
context.drawImage(imageHours, 0, y, 21, 90, 50, 50, 21, 90);
var down = false;
canvas.addEventListener('mousedown', function(event) { down = true; }, false);
canvas.addEventListener('mouseup', function() { down = false; }, false);
canvas.addEventListener('mousemove', function(event){
if(down){
if(event.layerY > 50 && event.layerY < 140){
y = event.layerY;
}
clearClock(context);
context.drawImage(imageHours, 0, y, 21, 90, 50, 50, 21, 90);
}
}, false);
}
</script>
</head>
<body onload="init();">
<canvas id="uhr" height="500px" width="300px"/>
</body>
</html>
Sprite :
编辑:我在我的主贴中添加了一条评论。我试图像那样完成这个的原因是..我不想为此使用图书馆..因为我想学习这些东西......使用图书馆并不能帮助我学习......
最佳答案
您的问题有点令人困惑。我认为下次创建一个 fiddle 是个好主意，它可以帮助人们帮助你。
我认为这就是您想要做的 -> jsFiddle
我发现了两个问题:
- 你的y值错误，导致图片无法显示。
- 您需要在 mouseup 上更新/重绘您的图标。您设置为 false，但在这种情况下 mousemove 不会重绘图标。
编辑:
我已经更新了 fiddle here ，这应该是您想要的，也是您应用程序的良好起点。我鼓励您在 Canvas 上多读一点，尤其是在使用图像方面。 Mozzila 开发网络有一个很棒的 intro to it ，请检查它以获取有关此代码为何如此工作的详细解释。
希望这对您有所帮助!
关于javascript - 使用 Sprite 的 html5 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12059372/