HTML5画布：如何通过旋转图像来制作旋转加载图标？

Question

HTML5画布：如何通过旋转图像来制作旋转加载图标？

19

我正在使用HTML5 Canvas制作一个加载动画。我已经把我的图形放在了画布上，但当我旋转它时，图像会旋转到画布之外。如何告诉它围绕中心点旋转图形？

<!DOCTYPE html>
<html>
 <head>
  <title>Canvas test</title>
  <script type="text/javascript">
   window.onload = function() {
    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
     // Initaliase a 2-dimensional drawing context
     var context = drawingCanvas.getContext('2d');

     //Load the image object in JS, then apply to canvas onload     
     var myImage = new Image();
     myImage.onload = function() {
      context.drawImage(myImage, 0, 0, 27, 27);
     }
     myImage.src = "img/loading.png";

     context.rotate(45);
    }
   }
  </script>
 </head>
 <body>
  <canvas id="myDrawing" width="27" height="27">
  </canvas>
 </body>
</html>

- Bill

4

我认为这是一个有趣的问题，但我质疑使用可执行代码来完成一些可以用动态 GIF 轻松完成且不会给 CPU 带来额外压力的任务的价值。尤其是在代码负载/处理点的情况下。 - Keith Adler

@nissan，学习新的做事方式没有错。这似乎是一个相当简单的练习，可以学习这个过程。 - lincolnk

我正在将一张图像覆盖在一个视频上，因此带有透明度的gif会留下锯齿状的边缘。动画png不被所有支持HTML5视频的浏览器所支持，而这正是加载器图像要覆盖的内容。 - Bill

基准测试会很有趣。我来这里是因为移动浏览器在等待ajax调用时似乎停止了对.gif的动画处理。这有点违背了我尝试做的事情的目的。 - Jens Frandsen

4个回答

5

rotate 方法可以让画布（canvas）以当前位置0,0为起点旋转。如果你需要将某个点作为旋转中心，你需要先通过移动画布实现。

context.translate(x,y);

在您移动参考点后，您希望将图像居中于该点上方。您可以通过调用以下方法来实现：

context.drawImage(myImage, -(27/2), -(27/2), 27, 27);

这段代码告诉浏览器从当前参考点的左上方开始绘制图片，同时将图片大小指定为起点，之前你是从参考点开始向右下方完全绘制（所有方向都相对于画布的旋转方向）。

由于你的画布大小与图片大小相同，因此在调用translate时，x和y坐标将使用相同的度量值（27/2）。

所以，将所有内容结合起来。

// initialization:
context.translate(27/2, 27/2);

// onload: 
context.rotate(Math.PI * 45 / 180);
context.drawImage(myImage, -(27/2), -(27/2), 27, 27);

编辑：此外，旋转单位是弧度，因此您需要在代码中将角度转换为弧度。

重新排列的编辑内容。

- lincolnk

1

对于其他想要了解类似内容的人，您可能需要查看这个脚本，它正是最初请求的内容： http://projects.nickstakenburg.com/spinners/

您可以在此处找到Github源代码： https://github.com/staaky/spinners

他使用旋转，同时保留一个矩形缓存，这些矩形会随着时间的推移而逐渐消失。

- benjamin.keen

0

我找到了另一种实现 HTML 加载动画的方法。你可以使用精灵图动画。这种方法既可以在 HTML5 画布中使用，也可以在普通的 HTML/JavaScript/CSS 中使用。下面是一个用 HTML/JavaScript/CSS 实现的简单方法。

它使用精灵图像作为背景。它创建一个 JavaScript 计时器来改变背景图像位置以控制精灵图动画。示例代码如下。你也可以在这里查看结果：http://jmsliu.com/1769/html-ajax-loading-spinner.html

<html>
<head><title></title></head>
<body>
    <div class="spinner-bg">
        <div id="spinner"></div>
    </div>
    <style>
        .spinner-bg
        {
            width:44px;
            height:41px;
            background: #000000;
        }

        #spinner
        {
            width: 44px;
            height: 41px;
            background:url(./preloadericon.png) no-repeat;
        }
    </style>
    <script>
        var currentbgx = 0;
        var circle = document.getElementById("spinner");
        var circleTimer = setInterval(playAnimation, 100);

        function playAnimation() {
            if (circle != null) {
                circle.style.backgroundPosition = currentbgx + "px 0";
            }

            currentbgx -= 44; //one frame width, there are 5 frame
            //start from 0, end at 176, it depends on the png frame length
            if (currentbgx < -176) {
                currentbgx = 0;
            }
        }
    </script>
</body>

- James

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bill · Accepted Answer

这里是完整的可工作示例：）

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas Cog</title>
        <script type="text/javascript">
            var cog = new Image();
            function init() {
                cog.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABK1JREFUeNqMVt1ZGzkUvVfS4IW1l8GO82w6IBXE7mCpAFMB+Pt4Z6iApALcAe4AU0HoAJfg7BPYHinnXmmciX+y0YdmJHnQ0bk/R5cvh5cUyFPwRD4EChgEvGWMB36R3+JaiTkmD5gOs8yNb25uLlerFf1pM2yIGA82TEY7xow1oj4GBU6S6yywPNG4JwDH+XGv0Whs7ndN8n97mmPsLCSYgy7ImPQE/pFDyAF+7L0fgTNFUDBcLal90taD1doQ/T6NT9DnW8zkT+jJuQVYukG3hifCVk/L3JOxMBa8VVlSp9MhHKLaB+zpNo1fdgEpmByuMqUAV5viOQLwXNax9KBAFNEEpN1pUwnQmvl6aTza6zNjrCKaymeyOdYAMgfg18iG4T/qw+AC94zvpzDjcwqOXo3VGH26H0xMZ7jPxgT0R2zUi4BYt6bAfEbJvJFZKA4ODgZ5nhcJLE9mk35X21vWC/TXKmiwr2xszoQd/PQv3t/QCzY2twpqBpb5FKOp+hCgzWaTWq0W1Xx0ij5An9WC5VtiLMwvNBrVaSGMvQk5jHQVPN7sb0HzAtE+QJrNgrcUNEARieWCut0ugR0tl8sKcJ5Ahc3jRviPK8ZGTaaBwGKyT+gTiwM4a3Jrba6MbeVXo5F4kp9shn29ndUYC9vLirGDXzRhrYhD8DME5Hkg22df5rDYS/RXmVIsaP/Q/SXs600YnifTjbeSWliEdTYb3QyTqYfdDKTL4B1KS6tVqf6SgGq3P9BvZGpvNIrPCgVKZlGlCDQDxJiCjVppCab05DJHzb+b1Gm36X80cVjLuzozexs0f6IgRkA5XRhzIixRL1+IzhwdHVHrn1Y9oXe1i10aKT6bGGhg1CKK+cT0zCGCs0oXTIogybJMw/779//o48duMvnO9rzLn+Kz8wgS5Shqo4njpCoOQA5Ajb8adHh4SMvVghaLhYb/HsBip88krNVISSEigOlhjmi0LziNhr6wOsgO9C1339vbGznnNAU2AM9Svk235cqKieKGkldAf7DGvTrjnjJnzyQoMu0ZTuZgUqvmlYR+f39XIE4uqCX1E/rDZpCYmKwOOmivAfYK9KF1AM7EdG4uAMLAOjmQideQXOJQkyUisqYiFRhtSFbxCxj8do0T30dmTvLhC+an0MZZVBHX09tBTG4qFigZEJEChjTIEwtRik81Qa7uOQU0IrYAe7FRjqYw6SlYjgAyN1GmHsFIGPfVnxzFuFITKEkfYK+oWZ5qKlIkcZ7UE92oXBmeIgIxtAO5UtSHqo9uiLW+sme5ejSIRASeAFR4LYy8MMzL1aq3EYWzJF28BgMEzGYpBkrMKelgl+P6uTcVY8NjLYyYPwMTCcufSaouH6al9xNJcjC82vDb9uVZKbrWIumNO+waVsu1TCC+Wxcg6xaSpsZSYM2wLO9/U8qZWH+wztQnsfAxV/E3MIKZVf1FsmJVV8mamhEmxZ0X7sSsABsGv1tZJGejmptU7FBUDYzPAXQBwFEEl+9+stFEroJEci2ELwIMmZuWoSTE9DYYcWVCjlJrZWMpeBhlAEqBiulPE84S3ixU5gSTwGGOdyEVNJXxA8nPevshwABHktBS1YoQ+QAAAABJRU5ErkJggg=='; // Set source path
                setInterval(draw,10);
            }
            var rotation = 0;
            function draw(){
                var ctx = document.getElementById('myCanvas').getContext('2d');
                ctx.globalCompositeOperation = 'destination-over';
                ctx.save();
                ctx.clearRect(0,0,27,27);
                ctx.translate(13.5,13.5); // to get it in the origin
                rotation +=1;
                ctx.rotate(rotation*Math.PI/64); //rotate in origin
                ctx.translate(-13.5,-13.5); //put it back
                ctx.drawImage(cog,0,0);
                ctx.restore();
            }
            init();
        </script>
    </head>
    <body>
        <canvas width="27" height="27" id="myCanvas"></canvas>
    </body>
</html>