DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 實例講解利用HTML5 Canvas API操作圖形旋轉的方法
實例講解利用HTML5 Canvas API操作圖形旋轉的方法
編輯：HTML5教程     

作為web開發者，我一直在和HTML5 canvas元素打交道。渲染圖片是一個大的分支，十分重要而且很常用，所以,今天的教程是關於畫布圖像展示以及如何旋轉圖像，說不定是你現在真正想要的好東西。

總的來說，canvas旋轉有兩種方式：中心旋轉和參照點旋轉。熟練應用旋轉功能，對你的開發作品會有極大的幫助。

關於對象的中心旋轉
第一個類型的旋轉，我們要看看是對其中心旋轉一個對象。實現使用畫布元素，這是一個最簡單的旋轉類型。我們把一只大猩猩的圖片作為素材進行試驗。
基本的想法是,我們要把帆布按照一個中心點旋轉,旋轉畫布,然後把畫布回到原來的位置。如果你有一些經驗關於圖形引擎，那麼這聽起來應該很熟悉。代碼大概就是這樣：（點擊看效果）

JavaScript Code復制內容到剪貼板
  1. function onload() {   
  2.     var canvas = document.getElementById('c1');   
  3.     var ctx1 = canvas.getContext('2d');   
  4.     var image1 = new Image();   
  5.     image1.onload = function() {   
  6.       // regular rotation about center   
  7.       var xpos = canvas.width/2;   
  8.       var ypos = canvas.height/2;   
  9.       ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);   
  10.       ctx1.save();   
  11.       ctx1.translate(xpos, ypos);   
  12.       ctx1.rotate(47 * Math.PI / 180);//旋轉47度   
  13.       ctx1.translate(-xpos, -ypos);   
  14.       ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);   
  15.       ctx1.restore();   
  16.     }   
  17.     image1.src = 'image.png';   
  18.   }     

2016322114126609.gif (383×384)

注釋已經非常詳細，但我仍舊想提一點：.save()和.restore()。他們的作用是保存旋轉之前的畫布，然後旋轉後恢復。有效地避免了和其他渲染沖突，十分關鍵，許多朋友沒有順利進行旋轉，大多都是這個原因。

圍繞某個點旋轉
第二個類型是圖像圍繞空間的某個點進行旋轉，這將變得比較復雜。可為什麼要這樣做呢？很多情況下，你需要把對象參照另一個對象旋轉，單一的圍繞中心旋轉無法滿足需求。而且後者會更常用，比如在做網頁游戲中，經常會用到旋轉。

2016322114156905.jpg (422×253)
JavaScript Code復制內容到剪貼板

  1. function onload() {   
  2.     var canvas2 = document.getElementById('c2');   
  3.     var ctx2 = canvas2.getContext('2d');   
  4.     // regular rotation about point   
  5.     var image2 = new Image();   
  6.     image2.onload = function() {   
  7.       // regular rotation about a point   
  8.       var angle = 120 * Math.PI / 180; // angle of rotation in radians   
  9.       var rx = 300, ry = 200; // the rotation x and y   
  10.       var px = 300, py = 50; // the objects center x and y   
  11.       var radius = ry - py; // the difference in y positions or the radius   
  12.       var dx = rx + radius * Math.sin(angle); // the draw x    
  13.       var dy = ry - radius * Math.cos(angle); // the draw y   
  14.       ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2);   
  15.       ctx2.beginPath();   
  16.       ctx2.arc(300,200,5,0,Math.PI*2,false);   
  17.       ctx2.closePath();   
  18.       ctx2.fillStyle = 'rgba(0,255,0,0.25)';   
  19.       ctx2.fill();   
  20.          
  21.       ctx2.save();   
  22.       ctx2.translate(dx, dy);   
  23.       ctx2.rotate(angle);   
  24.       ctx2.translate(-dx, -dy);   
  25.       ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);   
  26.       ctx2.restore();   
  27.     }   
  28.     image2.src = 'smallimage.png';   
  29.   }  

2016322114243019.gif (614×416)

代碼簡潔，作用是把一張圖片按照一個點旋轉了120度，這張圖片更形象。

繪制魔性Logo
這是在度娘上看到了一個logo，巧妙運用了旋轉變換，用一個很簡單矩形，通過旋轉變換，變成了一個很漂亮的logo。這logo是不是很有魔性？童鞋們動動腦，嘗試實現一下它。下面，提供我實現它的代碼。

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>繪制魔性Logo</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？！趕快換一個吧！！   
  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.         for(var i=1; i<=10; i++){   
  28.             context.save();   
  29.             context.translate(400,300);   
  30.             context.rotate(36 * i * Math.PI / 180);   
  31.             context.fillStyle = "rgba(255,0,0,0.25)";   
  32.             context.fillRect(0, -200, 200, 200);   
  33.             context.restore();   
  34.         }   
  35.     };   
  36. </script>   
  37. </body>   
  38. </html>  

運行結果：
2016322114315247.jpg (417×318)

是不是非常的酷？這個圖形稍微分析一下發現還是蠻簡單的，就是讓一個正放形，以屏幕中點（即初始正方形左下角頂點）為圓心進行旋轉。

藝術是不是很美妙？大家一定以及體會到了Canvas的奇妙，簡簡單單的幾行代碼就能實現無窮無盡的效果。只要腦洞夠大，沒有什麼是不可以實現的。所以，揚起咱們的藝術家的旗幟，加快步伐，繼續前進！

HTML5教程
html5使用canvas繪制太陽系效果
   星球
2015年高大上雙屏互動，你都玩過了嗎？
 　　從2014下半年起，各種H5游戲和專題頁紛紛嶄露頭角。“H5&rdquo
HTML5拖拽的簡單實例
拖拽相關屬性draggable屬性是html5的全局屬性，是html5支持拖放操作的方式之一，用來表

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
H5兩大門派七種玩法 HTML5 對各個標簽的定義與解釋：noscript canvas代替img渲染圖片 針對webkit的HTML, CSS和Javascript HTML5 script元素async、defer異步加載使用介紹 很棒的HTML5和CSS3教程 H5應用從字體、排版、動效、適配型等講述 HTML5畫板實驗 深入剖析HTML5 內聯框架iFrame 火爆的“吳亦凡入伍”HTML5背後有哪些設計故事？
熱門推薦
利用html5新特性history的pushState使ajax頁面可前進後退 詳解HTML5中rel屬性的prefetch預加載功能使用 HTML 5可以做五件事情 超出你的想象 22個HTML5的初級技巧 HTML5手機APP開發入門(1) Html5實現用戶注冊自動校驗功能實例代碼 用html5實現語音搜索框的方法 html5的地理定位 placeholder屬性做兼容性處理
大家都在看
交互設計理論:可用性案例分析 深度解剖DIV+CSS工作原理 javascript面向對象快速入門實例教程 談談關於JavaScript 中的 MVC 模式 原生js結合html5制作簡易的雙色子游戲 node.js中的buffer.fill方法教程使用說明詳解 JavaScript簡介 jquery實現圖片燈箱明暗的遮罩效果
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved