怎么用CanvasAPI操作圖形旋轉(zhuǎn)

本篇內(nèi)容主要講解“怎么用Canvas API操作圖形旋轉(zhuǎn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么用Canvas API操作圖形旋轉(zhuǎn)”吧!

創(chuàng)新互聯(lián)公司是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),網(wǎng)站空間、主機租用、主機托管，四川、重慶、廣東電信服務(wù)器租用,德陽服務(wù)器托管，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國大陸、港澳臺以及歐美等多個國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

關(guān)于對象的中心旋轉(zhuǎn)

第一個類型的旋轉(zhuǎn)，我們要看看是對其中心旋轉(zhuǎn)一個對象。實現(xiàn)使用畫布元素，這是一個最簡單的旋轉(zhuǎn)類型。我們把一只大猩猩的圖片作為素材進(jìn)行試驗。

基本的想法是,我們要把帆布按照一個中心點旋轉(zhuǎn),旋轉(zhuǎn)畫布,然后把畫布回到原來的位置。如果你有一些經(jīng)驗關(guān)于圖形引擎，那么這聽起來應(yīng)該很熟悉。代碼大概就是這樣：（點擊看效果）

JavaScript Code復(fù)制內(nèi)容到剪貼板

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);//旋轉(zhuǎn)47度

ctx1.translate(-xpos, -ypos);

ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);

ctx1.restore();

}

image1.src = 'image.png';

}

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

圍繞某個點旋轉(zhuǎn)

第二個類型是圖像圍繞空間的某個點進(jìn)行旋轉(zhuǎn)，這將變得比較復(fù)雜?？蔀槭裁匆@樣做呢？很多情況下，你需要把對象參照另一個對象旋轉(zhuǎn)，單一的圍繞中心旋轉(zhuǎn)無法滿足需求。而且后者會更常用，比如在做網(wǎng)頁游戲中，經(jīng)常會用到旋轉(zhuǎn)。

JavaScript Code復(fù)制內(nèi)容到剪貼板

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';

}

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

繪制魔性Logo

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>

<head>

<title>繪制魔性Logo</title>

<style>

body { background: url("./images/bg3.jpg") repeat; }

#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

</style>

</head>

<body>

你的瀏覽器居然不支持Canvas？！趕快換一個吧??！

</canvas>

</div>

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操作圖形旋轉(zhuǎn)”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文題目：怎么用CanvasAPI操作圖形旋轉(zhuǎn)
文章位置：http://aaarwkj.com/article16/jpdodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、企業(yè)建站、企業(yè)網(wǎng)站制作、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

怎么用CanvasAPI操作圖形旋轉(zhuǎn)