个人中心
gpt4 book ai didi

javascript - 使用 Sprite 的 html5 Canvas

转载 作者：行者123 更新时间：2023-11-28 02:04:56 24 4
gpt4 key购买 nike

我想在 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 : Sprite:

编辑:我在我的主贴中添加了一条评论。我试图像那样完成这个的原因是..我不想为此使用图书馆..因为我想学习这些东西......使用图书馆并不能帮助我学习......

最佳答案

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

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

我发现了两个问题:

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

编辑:

我已经更新了 fiddle here ，这应该是您想要的，也是您应用程序的良好起点。我鼓励您在 Canvas 上多读一点，尤其是在使用图像方面。 Mozzila 开发网络有一个很棒的 intro to it ，请检查它以获取有关此代码为何如此工作的详细解释。

希望这对您有所帮助!

关于javascript - 使用 Sprite 的 html5 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12059372/

24 4 0
文章推荐： c++ - Magick++ 获取像素颜色。 pixelpacket 似乎不存在了
文章推荐： c++ - 使用 Maya API 检查节点是否连接到特定插头
文章推荐： html - 响应式背景图像 Bootstrap
文章推荐： c++ - 在 C++ 中对指针 "sideways"进行类型转换时会发生什么
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com