實例講解利用HTML5 Canvas API操作圖形旋轉的方法

2020-03-24 18:51:31

字體：大中小

來源：轉載

供稿：網友

作為web開發者，我一直在和HTML5 canvas元素打交道。渲染圖片是一個大的分支，十分重要而且很常用，所以,今天的教程是關于畫布圖像展示以及如何旋轉圖像，說不定是你現在真正想要的好東西。總的來說，canvas旋轉有兩種方式：中心旋轉和參照點旋轉。熟練應用旋轉功能，對你的開發作品會有極大的幫助。關于對象的中心旋轉
第一個類型的旋轉，我們要看看是對其中心旋轉一個對象。實現使用畫布元素，這是一個最簡單的旋轉類型。我們把一只大猩猩的圖片作為素材進行試驗。
基本的想法是,我們要把帆布按照一個中心點旋轉,旋轉畫布,然后把畫布回到原來的位置。如果你有一些經驗關于圖形引擎，那么這聽起來應該很熟悉。代碼大概就是這樣：（點擊看效果）
JavaScript Code復制內容到剪貼板
functiononload(){ varcanvas=document.getElementById('c1'); varctx1=canvas.getContext('2d'); varimage1=newImage(); image1.onload=function(){ //regularrotationaboutcenter varxpos=canvas.width/2; varypos=canvas.height/2; ctx1.drawImage(image1,xpos-image1.width/2,ypos-image1.height/2); ctx1.save(); ctx1.translate(xpos,ypos); ctx1.rotate(47*Math.PI/180);//旋轉47度 ctx1.translate(-xpos,-ypos); ctx1.drawImage(image1,xpos-image1.width/2,ypos-image1.height/2); ctx1.restore(); } image1.src='image.png'; }
注釋已經非常詳細，但我仍舊想提一點：.save()和.restore()。他們的作用是保存旋轉之前的畫布，然后旋轉后恢復。有效地避免了和其他渲染沖突，十分關鍵，許多朋友沒有順利進行旋轉，大多都是這個原因。圍繞某個點旋轉
第二個類型是圖像圍繞空間的某個點進行旋轉，這將變得比較復雜。可為什么要這樣做呢？很多情況下，你需要把對象參照另一個對象旋轉，單一的圍繞中心旋轉無法滿足需求。而且后者會更常用，比如在做網頁游戲中，經常會用到旋轉。
JavaScript Code復制內容到剪貼板
functiononload(){ varcanvas2=document.getElementById('c2'); varctx2=canvas2.getContext('2d'); //regularrotationaboutpoint varimage2=newImage(); image2.onload=function(){ //regularrotationaboutapoint varangle=120*Math.PI/180;//angleofrotationinradians varrx=300,ry=200;//therotationxandy varpx=300,py=50;//theobjectscenterxandy varradius=ry-py;//thedifferenceinypositionsortheradius vardx=rx+radius*Math.sin(angle);//thedrawx vardy=ry-radius*Math.cos(angle);//thedrawy ctx2.drawImage(image2,300-image2.width/2,50-image2.height/2); ctx2.beginPath(); ctx2.arc(300,200,5,0,Math.PI*2,false); ctx2.closePath(); ctx2.fillStyle='rgba(0,255,0,0.25)'; ctx2.fill(); ctx2.save(); ctx2.translate(dx,dy); ctx2.rotate(angle); ctx2.translate(-dx,-dy); ctx2.drawImage(image2,dx-image2.width/2,dy-image2.height/2); ctx2.restore(); } image2.src='smallimage.png'; }
代碼簡潔，作用是把一張圖片按照一個點旋轉了120度，這張圖片更形象。繪制魔性Logo
這是在度娘上看到了一個logo，巧妙運用了旋轉變換，用一個很簡單矩形，通過旋轉變換，變成了一個很漂亮的logo。這logo是不是很有魔性？童鞋們動動腦，嘗試實現一下它。下面，提供我實現它的代碼。JavaScript Code復制內容到剪貼板
style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); for(vari=1;i i++){ context.save(); context.translate(400,300); context.rotate(36*i*Math.PI/180); context.fillStyle= rgba(255,0,0,0.25) ; context.fillRect(0,-200,200,200); context.restore(); } }; /script /body /html
運行結果：
是不是非常的酷？這個圖形稍微分析一下發現還是蠻簡單的，就是讓一個正放形，以屏幕中點（即初始正方形左下角頂點）為圓心進行旋轉。藝術是不是很美妙？大家一定以及體會到了Canvas的奇妙，簡簡單單的幾行代碼就能實現無窮無盡的效果。只要腦洞夠大，沒有什么是不可以實現的。所以，揚起咱們的藝術家的旗幟，加快步伐，繼續前進！
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5本地存儲之Web Storage應用介紹

下一篇：html中big標簽如何使用？html big標簽的使用實例