HTML5实例教程：Canvas标签完成矩阵变换-HTML教程-爱易网页

HTML5实例教程：Canvas标签完成矩阵变换

日期：2013-12-23　浏览次数：20701 次

网页制造aiyiweb文章简介：HTML5每日一练之Canvas标签的使用-矩阵变换 .

我们到如今为止，曾经学习了利用坐标变换而实现的图形变换技术，当利用坐标变换不能满足我们的需求时，我们可以利用矩阵变换技术。接下来，我们将引见更为复杂的矩阵变换变形技术。
矩阵是用来专门实现图形变形的，它与坐标一同配合使用，达到变形的目的。当图形上下文被创建完毕时，理想上也创建了一个默认的变换矩阵，如果不对这个矩阵进行修正，那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形，绘制出来的图形也不经过缩放变形处理，但是如果对这个变换矩阵进行修正，那么情况就不一样了。

transform方法

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;
/*绘制圆弧*/
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标签完成矩阵变换

相关资料更多>

推荐阅读更多>