網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：HTML5每日一練之Canvas標(biāo)簽的應(yīng)用-矩陣變換 . 我們到現(xiàn)在為止，已經(jīng)學(xué)習(xí)了利用坐標(biāo)變換而實(shí)現(xiàn)的圖形變換技術(shù)，當(dāng)利用坐標(biāo)變換不能滿(mǎn)足我們的需要時(shí)，我們可以利用矩陣變換技術(shù)。接下來(lái)，我們將介紹更為復(fù)雜的矩陣變換變形技術(shù)。
矩陣是用來(lái)專(zhuān)門(mén)實(shí)現(xiàn)圖形變形的，它與坐標(biāo)一起配合使用，達(dá)到變形的目的。當(dāng)圖形上下文被創(chuàng)建完畢時(shí)，事實(shí)上也創(chuàng)建了一個(gè)默認(rèn)的變換矩陣，如果不對(duì)這個(gè)矩陣進(jìn)行修改，那么接下來(lái)繪制的圖形將以畫(huà)布的最左上角為坐標(biāo)原點(diǎn)進(jìn)行繪制圖形，繪制出來(lái)的圖形也不經(jīng)過(guò)縮放變形處理，但是如果對(duì)這個(gè)變換矩陣進(jìn)行修改，那么情況就不一樣了。
transform方法
context.transform(a, b, c, d, x, y);
此方法有6個(gè)參數(shù)，其中a, b, c, d這四個(gè)參數(shù)主要用來(lái)對(duì)圖形進(jìn)行變形；x, y表示移動(dòng)的坐標(biāo)點(diǎn)。
在上節(jié)使用坐標(biāo)變換進(jìn)行圖形變形中所提到的三個(gè)方法：
translate(x, y);
scale(x ,y);
rotate(angle);
它們都可以使用transform方法來(lái)代替，套用context.transform(a, b, c, d, x, y);中的六個(gè)參入如下：
translate(x, y);
scale(a, d);
rotate(b, c);//此方法其實(shí)只有一個(gè)參數(shù)，在這里為了便于理解且對(duì)應(yīng)transform，故使用剩余的2個(gè)參數(shù)，放在這里，是為了告訴大家，這兩個(gè)參數(shù)作用差不多，都是與旋轉(zhuǎn)有關(guān)
代碼案例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>HTML5每日一練之Canvas標(biāo)簽的應(yīng)用-矩陣變換</title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("W3Cfuns_canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#eee"; context.fillRect(0, 0, 800, 600); var colors = ["#f00", "#f90", "#ff0", "#090", "#00f", "#0051a1", "#09f", "#0f0", "#0ff", "#000", "#900", "#090", "#009"];//定義顏色 /*定義線(xiàn)寬*/ context.lineWidth = 10; context.transform(1, 0, 0, 1, 100, 0); /*循環(huán)繪制圓弧*/ for(var i = 0, j = colors.length; i < j; i++) { /*定義每次向下移動(dòng)10個(gè)像素的變換矩陣*/ context.transform(1, 0, 0.03, 1, 10, 10); /*設(shè)定顏色*/ context.strokeStyle = colors; /*繪制圓弧*/ context.beginPath(); context.arc(280, 200, 150, 0, 2, true); context.stroke(); } } </script> </head>
<body> <canvas id="W3Cfuns_canvas" width="800" height="600"></canvas> </body> </html>
