使用精灵的html5画布答案

【问题标题】：html5 canvas using sprite使用精灵的html5画布
【发布时间】：2012-08-22 22:24:20
【问题描述】：

我想在 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 中添加了一条评论。我之所以要这样做是因为..我不想为此使用库..因为我想学习这样的东西...使用库对我的学习没有帮助...

【问题讨论】：

下次可以考虑做一个fiddle，那样马上调试会更方便。
But it doesn't work how I want. 嗯，你想要怎么样？
现在当我使用 drawImage 方法时，它的作用如下：当我向上滑动鼠标时，列表向上滑动，当我用鼠标向下滑动时，数字变大，这是我不想要的。 .我只是想从上到下或以其他方式拖动数字...就像一个微调器，我抓住一个位置，然后从那里拖动它..

标签： javascript html canvas

【解决方案1】：

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

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

我发现了两个问题：

你的y值不对，导致图片不显示。
您需要在 mouseup 上更新/重绘您的图标。您正在设置为 false，但在这种情况下 mousemove 不会重绘图标。

编辑：

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

希望这会有所帮助！

【讨论】：

1.但图像显示？ 2. 好的，我会看看...但是你的 jsFiddle 工作不是很流畅..我想抓住一个位置并向上或向下移动并平滑滚动......
我想我明白你想做什么。如果您不想使用库或框架，则没有“简单”的方法可以做到这一点，您必须自己制作动画。您是否对执行此类操作所需的逻辑有疑问？
是的，绝对......逻辑是主要问题......你知道我该如何教我这些东西吗？
你能把这张图片托管在某个地方吗？当它在 imgur 上时，我在控制台中被禁止 403。我想我有适合你的解决方案。只要给我一个图片的网址，我就会更新小提琴。
我已经编辑了我的答案，我想这就是你要找的。span>

【解决方案2】：

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

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

【讨论】：

显示列表？这意味着什么？还是我可以用谷歌搜索的常用术语？