小编Bil*_*ill的帖子

HTML5 Canvas:如何通过以度为单位旋转图像来制作加载微调器?

我正在使用html5画布制作一个加载微调器.我在画布上有我的图形但是当我旋转它时,图像从画布上旋转.如何告诉它在中心点旋转图形?

<!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 …
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas rotation

18
推荐指数
2
解决办法
3万
查看次数

标签 统计

canvas ×1

html5 ×1

javascript ×1

rotation ×1