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

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

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

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

angle：是指旋轉(zhuǎn)的角度，旋轉(zhuǎn)的中心點(diǎn)是坐標(biāo)軸的原點(diǎn)。旋轉(zhuǎn)方向?yàn)轫槙r(shí)針進(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://aaarwkj.com/news45/309795.html

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

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

猜你還喜歡下面的內(nèi)容

成都外貿(mào)網(wǎng)站制作大概多少費(fèi)用 2023-12-22
如何定制高端網(wǎng)站建設(shè)？ 2023-12-22
提高網(wǎng)頁(yè)瀏覽速度的技巧 2023-12-22
寶雞品牌網(wǎng)站建設(shè)有哪些策略？ 2023-12-22
影響成都網(wǎng)站建設(shè)進(jìn)度的三個(gè)因素 2023-12-22
如何通過(guò)搜索引擎優(yōu)化數(shù)據(jù)優(yōu)化網(wǎng)站內(nèi)容？ 2023-12-22
網(wǎng)站的降權(quán)記錄 2023-12-22

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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