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

日期:2020-10-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下,就可以感受到转动转换的奥秘了。

上一篇:微营销推广怎样完成总流量引进 返回下一篇:没有了