HTML5每日一练之Canvas标签的应用-矩阵变换
我们到现在为止,已经学习了利用坐标变换而实现的图形变换技术,当利用坐标变换不能满足我们的需要时,我们可以利用矩阵变换技术。接下来,我们将介绍更为复杂的矩阵变换变形技术。
矩阵是用来专门实现图形变形的,它与坐标一起配合使用,达到变形的目的。当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个矩阵进行修改,那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形,绘制出来的图形也不经过缩放变形处理,但是如果对这个变换矩阵进行修改,那么情况就不一样了。
transform方法
在上节使用坐标变换进行图形变形中所提到的三个方法:
translate(x, y);
scale(x ,y);
rotate(angle);
它们都可以使用transform方法来代替,套用context.transform(a, b, c, d, x, y);中的六个参入如下:
translate(x, y);
scale(a, d);
rotate(b, c);//此方法其实只有一个参数,在这里为了便于理解且对应transform,故使用剩余的2个参数,放在这里,是为了告诉大家,这两个参数作用差不多,都是与旋转有关
代码案例
矩阵是用来专门实现图形变形的,它与坐标一起配合使用,达到变形的目的。当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个矩阵进行修改,那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形,绘制出来的图形也不经过缩放变形处理,但是如果对这个变换矩阵进行修改,那么情况就不一样了。
transform方法
- context.transform(a, b, c, d, x, y);
在上节使用坐标变换进行图形变形中所提到的三个方法:
translate(x, y);
scale(x ,y);
rotate(angle);
它们都可以使用transform方法来代替,套用context.transform(a, b, c, d, x, y);中的六个参入如下:
translate(x, y);
scale(a, d);
rotate(b, c);//此方法其实只有一个参数,在这里为了便于理解且对应transform,故使用剩余的2个参数,放在这里,是为了告诉大家,这两个参数作用差不多,都是与旋转有关
代码案例
- <!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 = "#eee";
- context.fillRect(0, 0, 800, 600);
- var colors = ["#f00", "#f90", "#ff0", "#090", "#00f", "#0051a1", "#09f", "#0f0", "#0ff", "#000", "#900", "#090", "#009"];//定义颜色
- /*定义线宽*/
- context.lineWidth = 10;
- context.transform(1, 0, 0, 1, 100, 0);
- /*循环绘制圆弧*/
- for(var i = 0, j = colors.length; i < j; i++)
- {
- /*定义每次向下移动10个像素的变换矩阵*/
- context.transform(1, 0, 0.03, 1, 10, 10);
- /*设定颜色*/
- 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>
【HTML5每日一练之Canvas标签的应用-矩阵变换】相关文章
2. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形
3. HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用
4. HTML5每日一练之Canvas标签的应用-在页面上放置Canvas
5. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
8. HTML5每日一练之Canvas标签的应用-绘制向日葵
10. HTML5每日一练之Canvas标签的应用-绘制线性渐变图形
本文来源:https://www.51html5.com/a619.html
﹝HTML5每日一练之Canvas标签的应用-矩阵变换﹞相关内容
- HTML5每日一练之progress标签的应用
- HTML5每日一练之视频标签的应用
- HTML5每日一练之figure新标签的应用
- HTML5每日一练之details展开收缩标签的应用
- HTML5每日一练之mark标签的应用
- HTML5每日一练之meter标签的应用
- HTML5每日一练之FileList文件列表对象的应用
- HTML5每日一练之datalist标签自动补全的使用
- HTML5每日一练之OL列表的改良
- Html5 Canvas 变换矩阵与坐标变形之间的关系