溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用Canvas API操作圖形旋轉”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用Canvas API操作圖形旋轉”吧!
關于對象的中心旋轉
第一個類型的旋轉，我們要看看是對其中心旋轉一個對象。實現使用畫布元素，這是一個最簡單的旋轉類型。我們把一只大猩猩的圖片作為素材進行試驗。
基本的想法是,我們要把帆布按照一個中心點旋轉,旋轉畫布,然后把畫布回到原來的位置。如果你有一些經驗關于圖形引擎，那么這聽起來應該很熟悉。代碼大概就是這樣：（點擊看效果）
JavaScript Code復制內容到剪貼板
function onload() {
var canvas = document.getElementById('c1');
var ctx1 = canvas.getContext('2d');
var image1 = new Image();
image1.onload = function() {
// regular rotation about center
var xpos = canvas.width/2;
var ypos = 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復制內容到剪貼板
function onload() {
var canvas2 = document.getElementById('c2');
var ctx2 = canvas2.getContext('2d');
// regular rotation about point
var image2 = new Image();
image2.onload = function() {
// regular rotation about a point
var angle = 120 * Math.PI / 180; // angle of rotation in radians
var rx = 300, ry = 200; // the rotation x and y
var px = 300, py = 50; // the objects center x and y
var radius = ry - py; // the difference in y positions or the radius
var dx = rx + radius * Math.sin(angle); // the draw x
var dy = ry - radius * Math.cos(angle); // the draw y
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復制內容到剪貼板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>繪制魔性Logo</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
for(var i=1; i<=10; 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 API操作圖形旋轉”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
