Html5 Canvas transform setTransform

時間 2019-11-06

標籤 html5 html canvas transform settransform 欄目 HTML5 简体版

原文原文鏈接

Html5 Canvas transform就是矩陣變換，一種座標的變形。javascript

座標變形的三種方式，平移translate, 縮放scale以及旋轉rotate均可以經過transform作到。html

transform(m11, m12, m21, m22, dx, dy)：這個方法必須將當前的變形矩陣乘上下面的矩陣：java

m11canvas	m21this	dxspa
m12code	m22orm	dyhtm
0blog	0	1

也就是說假設變化前A（x,y）獲得變換後B(x’,y’)能夠經過乘以上述矩陣便可獲得：

好比說：縮放scale

x」=x*a; //x放大a倍

y」=y*b; //y放大b倍

只需transform(a, 0, 0, b, 0, 0)；

A（x,y）經過transform就獲得了放大後的B(x’,y’)；與方法context.scale（a，b）同效；

好比旋轉rotate

假設將（x,y）繞原點逆時針旋轉θ獲得（x」,y」）,則：

x’=x*cosθ-y*sinθ

y’=x*sinθ y*cosθ

只需transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0）

A（x,y）經過transform就獲得了旋轉後的B(x’,y’)；與方法context.rotate(θ)同效；

就是說只要知道變化前和變換後的座標轉化公式，就能經過與矩陣相乘的方法獲得；

setTransform這個方法重置當前的變形矩陣爲單位矩陣，而後以相同的參數調用 transform 方法。就是消除前面transform行爲對此次行爲的影響；

提供一個代碼能夠本身研究一下

<!DOCTYPE HTML>
<html>
<head>
<script type=」text/javascript」>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById(「mycanvas」);
// Make sure we don」t execute when canvas isn」t supported
if (canvas.getContext){
// use getContext to use the canvas for australian casinos online drawing
var ctx = canvas.getContext(「2d」);
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200, 200);
var c = 0;
for (var ratedbet.co.uk i=0; i <= 12; i ) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = 「rgb(」 c 「,」 c 「,」 c 「)」;
ctx.fillRect(0, 0, 100, 100);
ctx.transform(cos, sin, -sin, cos, 0,0);
}
ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.fillStyle = 「rgba(100, 100, 255, 0.5)」;
ctx.fillRect(50, 50, 100, 100);
}else {
alert(「You need Safari or Firefox 1.5 to see this demo.」);
}
}
</script>
</head>
<body onload=」drawShape();」>
<canvas id=」mycanvas」 width=」400″ height=」400″></canvas>
</body>
</html>

1. 理解Canvas中的transform、setTransform函數
2. Canvas HTML5
3. HTML5- Canvas入門（六）
4. Canvas transform淺析
5. HTML5 – 4.canvas
6. HTML5 Canvas 詳解
7. 【HTML5】Canvas繪圖詳解-1
8. html5 canvas 學習
9. HTML5 Canvas
10. HTML5 canvas標籤詳解
更多相關文章...
• Mozilla Firefox 瀏覽器 - 瀏覽器信息
• 蘋果 Safari 瀏覽器 - 瀏覽器信息
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• ☆技術問答集錦（13）Java Instrument原理

相關標籤/搜索

jquery+html5+css3+canvas

html5+canvas+javascript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。