2

我想在 html5 画布上下文中使用精灵。

我想用鼠标拖动它。所以在拖动鼠标时显示区域会发生变化。

它应该看起来像一个宽度为 21 且高度为 90 的窗口，其中只有一部分精灵可见。当我向下或向上拖动精灵时，我希望可见部分发生变化。

我想我可以用 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>

雪碧： 雪碧：

编辑：我在我的 mainPost 中添加了评论。我试图这样做的原因是..我不想为此使用图书馆..因为我想学习这样的东西......使用图书馆并不能帮助我学习......

4

2 回答 2

1

你的问题有点令人困惑。我认为下次创建小提琴将是一个好主意，它可以帮助人们帮助你。

我认为这就是你想要做的-> jsFiddle

我发现的两个问题：

  1. 你的 y 值是错误的，它会导致图像不显示。
  2. 您需要在 mouseup 上更新/重绘您的图标。您正在设置为 false 但在这种情况下 mousemove 不会重绘图标。

编辑：

我在这里更新了小提琴，这应该是你想要的，也是你应用程序的一个很好的起点。我鼓励您在画布上阅读更多内容，尤其是在使用图像方面。Mozzila 开发网络对此有很好的介绍，请查看它以详细解释为什么此代码会以这种方式工作。

希望这可以帮助！

于 2012-08-21T17:05:22.437 回答
0

为了完成你需要的事情，你必须建立一个显示列表。那么事情就会变得容易。

如果您不介意使用图书馆，请查看以下链接。这些支持显示列表和多个对象。

  1. http://www.createjs.com/#!/EaselJS
  2. http://www.kineticjs.com/
于 2012-08-21T16:57:25.640 回答