在計(jì)算機(jī)上繪制圖形的時(shí)候，是以坐標(biāo)點(diǎn)為基準(zhǔn)來進(jìn)行繪制的，默認(rèn)情況下Canvas畫布的最左上角對(duì)應(yīng)于坐標(biāo)軸的原點(diǎn)(0, 0)。前面我們所講的所有利用Canvas API繪制出來的圖形都是以畫布最左上交為坐標(biāo)軸圓點(diǎn)，并以像素為單位來進(jìn)行繪制的。
如果對(duì)這個(gè)坐標(biāo)軸進(jìn)行改變，那么就可以實(shí)現(xiàn)圖形的變換處理了。對(duì)坐標(biāo)的變換處理有以下三種方式：
平移
使用圖形上下文對(duì)象的translate方法移動(dòng)坐標(biāo)軸原點(diǎn)，該方法定義如下：
cantext.translate(x, y);
x:表示橫坐標(biāo)，也就是將坐標(biāo)軸x從原點(diǎn)向【左】移動(dòng)多少個(gè)單位，默認(rèn)以像素為單位
y:表示縱坐標(biāo)，也就是將坐標(biāo)軸y從原點(diǎn)向【下】移動(dòng)多少個(gè)單位，默認(rèn)以像素為單位
擴(kuò)大
使用圖形上下文對(duì)象的scale方法將圖形放大，該方法的定義如下所示：
cantext.scale(x, y);
x:表示橫坐標(biāo)，也就是【水平方向】將圖形放大的倍數(shù)
y:表示縱坐標(biāo)，也就是【垂直方向】將圖形放大的倍數(shù)
注：將圖形縮小的時(shí)候，將這兩個(gè)參數(shù)設(shè)置為0-1之間的小數(shù)就可以了，比如，0.5表示將圖形縮小一半。
旋轉(zhuǎn)
使用圖形上下文對(duì)象的rotate方法將圖形進(jìn)行旋轉(zhuǎn)，該方法的定義如下所示：
cantext.rotate(angle);
是指旋轉(zhuǎn)的角度，旋轉(zhuǎn)的中心點(diǎn)是坐標(biāo)軸的原點(diǎn)。旋轉(zhuǎn)方向?yàn)轫槙r(shí)針進(jìn)行，要想逆方旋轉(zhuǎn)，只需要設(shè)置為負(fù)數(shù)即可。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>HTML5每日一練之Canvas標(biāo)簽的應(yīng)用-繪制坐標(biāo)變換圖形</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>聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
