HTML5教程：Canvas標簽繪制坐標變換圖形

2020-03-24 18:03:36

字體：大中小

來源：轉載

供稿：網友

繪制圖形的時候，我們可能經常會想到旋轉圖形，或者對圖形使用變形處理，使用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 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
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5之SVG 2D入門4—筆畫與填充

下一篇：html中的label標簽使用方法