Canvas標(biāo)簽繪制坐標(biāo)變換圖形

2023-12-22    分類： 網(wǎng)站建設(shè)

繪制圖形的時候，我們可能經(jīng)常會想到旋轉(zhuǎn)圖形，或者對圖形使用變形處理，使用Canvas API的坐標(biāo)軸變換處理功能，就能實(shí)現(xiàn)這種效果。

在計算機(jī)上繪制圖形的時候，是以坐標(biāo)點(diǎn)為基準(zhǔn)來進(jìn)行繪制的，默認(rèn)情況下Canvas畫布的最左上角對應(yīng)于坐標(biāo)軸的原點(diǎn)(0, 0)。前面我們所講的所有利用Canvas API繪制出來的圖形都是以畫布最左上交為坐標(biāo)軸圓點(diǎn)，并以像素為單位來進(jìn)行繪制的。

如果對這個坐標(biāo)軸進(jìn)行改變，那么就可以實(shí)現(xiàn)圖形的變換處理了。對坐標(biāo)的變換處理有以下三種方式：

平移 使用圖形上下文對象的translate方法移動坐標(biāo)軸原點(diǎn)，該方法定義如下：

cantext.translate(x, y);

x:表示橫坐標(biāo)，也就是將坐標(biāo)軸x從原點(diǎn)向【左】移動多少個單位，默認(rèn)以像素為單位 y:表示縱坐標(biāo)，也就是將坐標(biāo)軸y從原點(diǎn)向【下】移動多少個單位，默認(rèn)以像素為單位

擴(kuò)大 使用圖形上下文對象的scale方法將圖形放大，該方法的定義如下所示： cantext.scale(x, y);

x:表示橫坐標(biāo)，也就是【水平方向】將圖形放大的倍數(shù) y:表示縱坐標(biāo)，也就是【垂直方向】將圖形放大的倍數(shù) 注：將圖形縮小的時候，將這兩個參數(shù)設(shè)置為0-1之間的小數(shù)就可以了，比如，0.5表示將圖形縮小一半。

旋轉(zhuǎn) 使用圖形上下文對象的rotate方法將圖形進(jìn)行旋轉(zhuǎn)，該方法的定義如下所示： cantext.rotate(angle);

angle：是指旋轉(zhuǎn)的角度，旋轉(zhuǎn)的中心點(diǎn)是坐標(biāo)軸的原點(diǎn)。旋轉(zhuǎn)方向?yàn)轫槙r針進(jìn)行，要想逆方旋轉(zhuǎn)，只需要設(shè)置為負(fù)數(shù)即可。

下面的案例，就是使用這三種坐標(biāo)變換方式共同實(shí)現(xiàn)的下圖效果：

<!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>

文章標(biāo)題：Canvas標(biāo)簽繪制坐標(biāo)變換圖形
本文URL：http://www.muchs.cn/news45/309795.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站改版、全網(wǎng)營銷推廣、網(wǎng)站營銷、微信小程序、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)