详解根据HTML5 Canvas完成照片的平移及转动转变的

日期：2020-12-11 类型：科技新闻 

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

平移转换translate()
平移转换，故名思议，便是1般的图型位移。例如这里我想将坐落于（100，100）的矩形框平挪到（200，200）点。那末我要是在绘图矩形框以前再加context.translate(100,100)便可。

这里的translate()只传入两个主要参数，实际上便是新画布座标系原点的座标。下面融合编码看来看实际效果。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="zh">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>平移转换</title>  
  6.     <style>  
  7.         body { background: url("./images/bg3.jpg") repeat; }   
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <div id="canvas-warp">  
  13.     <canvas id="canvas">  
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>  
  16. </div>  
  17.   
  18. <script>  
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = "#00AAAA";   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.fillStyle = "red";   
  31.         context.translate(100,100);   
  32.         context.fillRect(100,100,200,100);   
  33.   
  34.     };   
  35. </script>  
  36. </body>  
  37. </html>  

运作結果：

这里的蓝色矩形框，是矩形框原先的部位，随后启用translate()方式，将矩形框位挪到（200，200），即鲜红色矩形框的部位。大家来用1张图看看，它是如何保证平移转换的。

没错，实际上这里的平移转换本质便是在平移座标系，而对translate()传入的主要参数，本质便是新座标系相对旧座标系的原点。这使得大家依然是在（100，100）绘图的鲜红色矩形框，在平移座标系以后，变到了（200，200）处。

留意应用情况储存：
实际上这里有1个坑，大家假如想把矩形框平挪到（300，300）如何办呢？也许大家会想，立即启用context.translate(200,200)便可以了。好，大家看看实际效果。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>平移转换</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = "#00AAAA";   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.fillStyle = "red";   
  31.         context.translate(100,100);   
  32.         context.fillRect(100,100,200,100);   
  33.   
  34.         context.fillStyle = "green";   
  35.         context.translate(200,200);   
  36.         context.fillRect(100,100,200,100);   
  37.   
  38.     };   
  39. </script>   
  40. </body>   
  41. </html>  

运作結果：

这里的翠绿色矩形框并沒有如大家所愿在（300，300）部位处，而是跑到了（400，400）这里。为何呢？想必大伙儿早已了解了回答——Canvas是根据情况的绘图。在大家第1次平移以后，座标系早已在（100，100）处了，因此假如再次平移，这个再根据新座标系再次平移座标系。那末要如何去处理呢？很简易，有两个方式。

第1，在每次应用完转换以后，记得将座标系平移回原点，即启用translate(-x,-y)。

第2，在每次平移以前应用context.save()，在每次绘图以后，应用context.restore()。

谨记，干万不必再想着我再次紧接着第1次平移以后再平移translate(100,100)不就可以了，这样你自身的座标系就会乱套，压根找不到自身的座标系原点在哪儿，在数次转换或封裝涵数以后，会坑死你。因此1定要以最开始情况为最压根的参考物，这是标准性难题。这里我提议应用第2种方式，并且在涉及到全部图型转换的情况下，都要这么解决，不仅是平移转换。

实际应用以下。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>平移转换</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = "#00AAAA";   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.save();   
  31.         context.fillStyle = "red";   
  32.         context.translate(100,100);   
  33.         context.fillRect(100,100,200,100);   
  34.         context.restore();   
  35.   
  36.         context.save();   
  37.         context.fillStyle = "green";   
  38.         context.translate(200,200);   
  39.         context.fillRect(100,100,200,100);   
  40.         context.restore();   
  41.   
  42.     };   
  43. </script>   
  44. </body>   
  45. </html>  

运作結果：

因而，在应用图型转换的情况下，要记得融合应用情况储存。


转动转换rotate()

同画圆弧1样，这里的rotate(deg)传入的主要参数是弧度，并不是角度。另外必须留意的是，这个的转动是以座标系的原点（0，0）为圆心开展的顺时针转动。因此，在应用rotate()以前，一般必须相互配合应用translate()平移座标系，明确转动的圆心。即，转动转换一般配搭平移转换应用的。

最终1点必须留意的是，Canvas是根据情况的绘图，因此每次转动全是接着之前转动的基本上再次转动，因此在应用图型转换的情况下务必配搭save()与restore()方式，1层面重设转动角度，另外一层面重设座标系原点。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>转动转换</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.   
  28.         for(var i = 0; i <= 12; i++){   
  29.             context.save();   
  30.             context.translate(70 + i * 50, 50 + i * 40);   
  31.             context.fillStyle = "#00AAAA";   
  32.             context.fillRect(0,0,20,20);   
  33.             context.restore();   
  34.   
  35.             context.save();   
  36.             context.translate(70 + i * 50, 50 + i * 40);   
  37.             context.rotate(i * 30 * Math.PI / 180);   
  38.             context.fillStyle = "red";   
  39.             context.fillRect(0,0,20,20);   
  40.             context.restore();   
  41.         }   
  42.   
  43.     };   
  44. </script>   
  45. </body>   
  46. </html>  

运作結果：

这里用for循环系统绘图了14对正方形，在其中蓝色是转动前的正方形，鲜红色是转动后的正方形。每次转动都以正方形左上角端点为原点开展转动。每次绘图都被save()与restore()包裹起来，每次转动前都挪动了座标系。童鞋们能够自身动动手能力，实践活动1下，就可以感受到转动转换的奥秘了。

上一篇：HTML5当地数据信息库基本实际操作详解 返回下一篇：HTML5怎样为样子图上色调如何绘图具备色调和全透