Canvas標簽繪制坐標變換圖形
2023-12-22 分類： 網(wǎng)站建設
繪制圖形的時候，我們可能經(jīng)常會想到旋轉(zhuǎn)圖形，或者對圖形使用變形處理，使用Canvas API的坐標軸變換處理功能，就能實現(xiàn)這種效果。
在計算機上繪制圖形的時候，是以坐標點為基準來進行繪制的，默認情況下Canvas畫布的最左上角對應于坐標軸的原點(0, 0)。前面我們所講的所有利用Canvas API繪制出來的圖形都是以畫布最左上交為坐標軸圓點，并以像素為單位來進行繪制的。
如果對這個坐標軸進行改變，那么就可以實現(xiàn)圖形的變換處理了。對坐標的變換處理有以下三種方式：
平移 使用圖形上下文對象的translate方法移動坐標軸原點，該方法定義如下：
cantext.translate(x, y);
x:表示橫坐標，也就是將坐標軸x從原點向【左】移動多少個單位，默認以像素為單位 y:表示縱坐標，也就是將坐標軸y從原點向【下】移動多少個單位，默認以像素為單位
擴大 使用圖形上下文對象的scale方法將圖形放大，該方法的定義如下所示： cantext.scale(x, y);
x:表示橫坐標，也就是【水平方向】將圖形放大的倍數(shù) y:表示縱坐標，也就是【垂直方向】將圖形放大的倍數(shù) 注：將圖形縮小的時候，將這兩個參數(shù)設置為0-1之間的小數(shù)就可以了，比如，0.5表示將圖形縮小一半。
旋轉(zhuǎn) 使用圖形上下文對象的rotate方法將圖形進行旋轉(zhuǎn)，該方法的定義如下所示： cantext.rotate(angle);
angle：是指旋轉(zhuǎn)的角度，旋轉(zhuǎn)的中心點是坐標軸的原點。旋轉(zhuǎn)方向為順時針進行，要想逆方旋轉(zhuǎn)，只需要設置為負數(shù)即可。
下面的案例，就是使用這三種坐標變換方式共同實現(xiàn)的下圖效果：
<!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>
在計算機上繪制圖形的時候，是以坐標點為基準來進行繪制的，默認情況下Canvas畫布的最左上角對應于坐標軸的原點(0, 0)。前面我們所講的所有利用Canvas API繪制出來的圖形都是以畫布最左上交為坐標軸圓點，并以像素為單位來進行繪制的。
如果對這個坐標軸進行改變，那么就可以實現(xiàn)圖形的變換處理了。對坐標的變換處理有以下三種方式：
平移 使用圖形上下文對象的translate方法移動坐標軸原點，該方法定義如下：
cantext.translate(x, y);
x:表示橫坐標，也就是將坐標軸x從原點向【左】移動多少個單位，默認以像素為單位 y:表示縱坐標，也就是將坐標軸y從原點向【下】移動多少個單位，默認以像素為單位
擴大 使用圖形上下文對象的scale方法將圖形放大，該方法的定義如下所示： cantext.scale(x, y);
x:表示橫坐標，也就是【水平方向】將圖形放大的倍數(shù) y:表示縱坐標，也就是【垂直方向】將圖形放大的倍數(shù) 注：將圖形縮小的時候，將這兩個參數(shù)設置為0-1之間的小數(shù)就可以了，比如，0.5表示將圖形縮小一半。
旋轉(zhuǎn) 使用圖形上下文對象的rotate方法將圖形進行旋轉(zhuǎn)，該方法的定義如下所示： cantext.rotate(angle);
angle：是指旋轉(zhuǎn)的角度，旋轉(zhuǎn)的中心點是坐標軸的原點。旋轉(zhuǎn)方向為順時針進行，要想逆方旋轉(zhuǎn)，只需要設置為負數(shù)即可。
下面的案例，就是使用這三種坐標變換方式共同實現(xiàn)的下圖效果：
<!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>
文章標題：Canvas標簽繪制坐標變換圖形
本文URL：http://www.rwnh.cn/news45/309795.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、網(wǎng)站改版、全網(wǎng)營銷推廣、網(wǎng)站營銷、微信小程序、定制開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 成都外貿(mào)網(wǎng)站制作大概多少費用 2023-12-22
- 如何定制高端網(wǎng)站建設？ 2023-12-22
- 提高網(wǎng)頁瀏覽速度的技巧 2023-12-22
- 寶雞品牌網(wǎng)站建設有哪些策略？ 2023-12-22
- 影響成都網(wǎng)站建設進度的三個因素 2023-12-22
- 如何通過搜索引擎優(yōu)化數(shù)據(jù)優(yōu)化網(wǎng)站內(nèi)容？ 2023-12-22
- 網(wǎng)站的降權記錄 2023-12-22
- 微營銷中如何做好網(wǎng)絡銷售的幾個技巧 2023-12-22
- 成都網(wǎng)站制作流程是怎樣的 2023-12-22
- 【綿陽網(wǎng)站建設公司】選擇綿陽網(wǎng)站建設公司要注意什么？ 2023-12-22
- 成都企業(yè)網(wǎng)站怎樣做好網(wǎng)站推廣運營? 2023-12-22
- 集團大企網(wǎng)站制作如何做出高級感 2023-12-22
- 什么是代理服務器以及如何使用美國代理服務器？ 2023-12-22
- 景區(qū)應該怎么找抖音代運營？ 2023-12-22
- 不懂編程也能建站一個自助建站高手養(yǎng)成記 2023-12-22
- 如何寫出優(yōu)質(zhì)內(nèi)容的運營技巧匯總 2023-12-22
- 淺談交互設計規(guī)范 2023-12-22
- 網(wǎng)站建設中正確的運用H標簽能夠大大加強優(yōu)化的效果 2023-12-22
- 企業(yè)要學會利用微博營銷推廣 2023-12-22