返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

2019-01-28 15:10:26刘景俊

平移变换translate()
平移变换，故名思议，就是一般的图形位移。比如这里我想将位于（100，100）的矩形平移至（200，200）点。那么我只要在绘制矩形之前加上context.translate(100,100)即可。

这里的translate()只传入两个参数，其实就是新画布坐标系原点的坐标。下面结合代码来看看效果。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>   <html lang="zh">  
  2. <head>       <meta charset="UTF-8">  
  3.     <title>平移变换</title>       <style>  
  4.         body { background: url("./images/bg3.jpg") repeat; }            #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  5.     </style>   </head>  
  6. <body>   <div id="canvas-warp">  
  7.     <canvas id="canvas">           你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  8.     </canvas>   </div>  
  9.    <script>  
  10.     window.onload = function(){            var canvas = document.getElementById("canvas");   
  11.         canvas.width = 800;            canvas.height = 600;   
  12.         var context = canvas.getContext("2d");            context.fillStyle = "#FFF";   
  13.         context.fillRect(0,0,800,600);      
  14.         context.fillStyle = "#00AAAA";            context.fillRect(100,100,200,100);   
  15.            context.fillStyle = "red";   
  16.         context.translate(100,100);            context.fillRect(100,100,200,100);   
  17.        };   
  18. </script>   </body>  
  19. </html>  
相关文章 大家在看