HTML5教程：Canvas標簽繪制坐標變換圖形
2024-09-05 07:18:34
供稿：網友
網頁制作Webjx文章簡介：HTML5每日一練之Canvas標簽的應用-繪制坐標變換圖形. 繪制圖形的時候，我們可能經常會想到旋轉圖形，或者對圖形使用變形處理，使用Canvas API的坐標軸變換處理功能，就能實現這種效果。
在計算機上繪制圖形的時候，是以坐標點為基準來進行繪制的，默認情況下Canvas畫布的最左上角對應于坐標軸的原點(0, 0)。前面我們所講的所有利用Canvas API繪制出來的圖形都是以畫布最左上交為坐標軸圓點，并以像素為單位來進行繪制的。
如果對這個坐標軸進行改變，那么就可以實現圖形的變換處理了。對坐標的變換處理有以下三種方式：
平移
使用圖形上下文對象的translate方法移動坐標軸原點，該方法定義如下：
cantext.translate(x, y);
x:表示橫坐標，也就是將坐標軸x從原點向【左】移動多少個單位，默認以像素為單位
y:表示縱坐標，也就是將坐標軸y從原點向【下】移動多少個單位，默認以像素為單位
擴大
使用圖形上下文對象的scale方法將圖形放大，該方法的定義如下所示：
cantext.scale(x, y);
x:表示橫坐標，也就是【水平方向】將圖形放大的倍數
y:表示縱坐標，也就是【垂直方向】將圖形放大的倍數
注：將圖形縮小的時候，將這兩個參數設置為0-1之間的小數就可以了，比如，0.5表示將圖形縮小一半。
旋轉
使用圖形上下文對象的rotate方法將圖形進行旋轉，該方法的定義如下所示：
cantext.rotate(angle);
angle：是指旋轉的角度，旋轉的中心點是坐標軸的原點。旋轉方向為順時針進行，要想逆方旋轉，只需要設置為負數即可。
下面的案例，就是使用這三種坐標變換方式共同實現的下圖效果：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>HTML5每日一練之Canvas標簽的應用-繪制坐標變換圖形</title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("W3Cfuns_canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#d4d4d4"; context.fillRect(0, 0, 400, 300); //繪制圖形 context.translate(200, 25); context.fillStyle = "rgba(0, 0, 255, 0.25)"; for(var i = 0; i < 50; i++) { context.translate(25, 25); context.scale(0.95, 0.95); context.rotate(Math.PI / 10); context.fillRect(0, 0, 100, 50); } } </script> </head>
<body> <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas> </body> </html>
