HTML5教程-Canvas标签中的矩阵变换

来源：互联网发布：php web 开发编辑：程序博客网时间：2024/06/05 08:27

HTML5教程-Canvas标签中的矩阵变换

我们到现在为止，已经学习了利用坐标变换而实现的图形变换技术，当利用坐标变换不能满足我们的需要时，我们可以利用矩阵变换技术。接下来，我们将介绍更为复杂的矩阵变换变形技术。

矩阵是用来专门实现图形变形的，它与坐标一起配合使用，达到变形的目的。当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个矩阵进行修改，那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形，绘制出来的图形也不经过缩放变形处理，但是如果对这个变换矩阵进行修改，那么情况就不一样了。

ransform方法

context.transform(a, b, c, d, x, y);

此方法有6个参数，其中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[i]; 
                                /*绘制圆弧*/ 
                                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>

案例运行结果

本文原地址：http://www.sitejs.cn/sitejs-12747-1.html