canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這里首先演示下位移，這里使用的函數(shù)是translate(x,?y)這個函數(shù)是疊加的，也就是說，當translate(100,?100)，后再次調(diào)用translate(200,?200)，那么最后圓點的基準值就為translate(300,?300)。
也就是說如果要實現(xiàn)某個圖形的位移后，還要變回來。
代碼如下：
translate(100, 100); //TODO ... ... translate(-100, -100);或者使用如下的方式：
save(); //保存當前圖形狀態(tài) Restore(); //返回save前的狀態(tài)程序運行截圖如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "red";context.fillRect(0, 0, 400, 400);context.fillStyle = "blue";context.translate(100, 100);context.fillRect(0, 0, 400, 400);context.fillStyle = "green";context.translate(300, 300);context.fillRect(0, 0, 400, 400);}</script></body> </html>?
使用save()及restore()
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "red";context.fillRect(0, 0, 400, 400);context.save();context.fillStyle = "blue";context.translate(100, 100);context.fillRect(0, 0, 400, 400);context.restore();context.save();context.fillStyle = "green";context.translate(300, 300);context.fillRect(0, 0, 400, 400);context.restore();}</script></body> </html>?
下面是關(guān)于scale，這里scale會把坐標，線條邊框都擴大了，如下圖：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.save();context.scale(1, 1);context.strokeRect(50, 50, 200, 200);context.restore();context.save();context.scale(2, 2);context.strokeRect(50, 50, 200, 200);context.restore();context.save();context.scale(3, 3);context.strokeRect(50, 50, 200, 200);context.restore();}</script></body> </html>下面是關(guān)于變換矩陣transform。
這里有個基本概念：二維圖像變換矩陣為3*3，三維圖像變換矩陣為?4*4
關(guān)于二維圖像變換矩陣為：
[
a?c?e
b?d?f
0?0?1
]
?
a表示水平縮放，默認值為1；
b表示水平傾斜，默認值為0；
c表示垂直傾斜，默認值為0；
d表示垂直縮放，默認值為1；
e表示水平位移，默認值為0；
f表示垂直位移，默認值為0。
?
從中可知，默認情況下變換矩陣為單位矩陣
[
1?0?0
0?1?0
0?0?1
]
如下使用單位矩陣變換的例子：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "red";context.strokeStyle = "#058";context.lineWidth = 5;context.save();context.transform(1, 0, 0, 1, 0, 0);context.fillRect(50, 50, 300, 300);context.strokeRect(50, 50, 300, 300);context.restore();}</script></body> </html>?
下面開始進行變換，程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "red";context.strokeStyle = "#058";context.lineWidth = 5;context.save();context.transform(1, 1, 0, 1, 0, 0);context.fillRect(50, 50, 300, 300);context.strokeRect(50, 50, 300, 300);context.restore();}</script></body> </html>同樣這給transform也是疊加的，使用setTransform是把之前的變換都設(shè)置為單位矩陣，然后再進行縮放。
總結(jié)
以上是生活随笔為你收集整理的canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信息安全工程师笔记-云计算安全需求分析与
- 下一篇： Java笔记-AnnotationCon