免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Canvas標簽繪制坐標變換圖形

2023-12-22    分類： 網站建設

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

文章標題：Canvas標簽繪制坐標變換圖形
本文URL：http://m.newbst.com/news45/309795.html

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

廣告

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

成都網站建設