一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

HTML5中Canvas变换的使用使用样例

时间:2016-01-21 编辑:简简单单 来源:一聚教程网

1,变换介绍

变换,就是一种通过变化坐标系达到绘图目的的技术,具体有如下几种变换 :
(1)translate:平移变换
(2)scale:缩放变换
(3)rotate:旋转变换
(4)matrix:矩阵变换

2,平移变换(translate)

比如我们想要在三个地方绘制同样大小的正方形:

原文:HTML5 - Canvas的使用样例5 (变换的使用)

可以调用三次rect(),每次都传入不同的起点位置:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
context.line;
context.strokeStyle = "#cd2828";
 
//在三个地方绘制同样大小(30*30)的正方形
context.rect(50, 50, 30, 30);
context.rect(100, 100, 30, 30);
context.rect(150, 150, 30, 30);
 
context.stroke();

也可以在同一个地方调用三次rect(),但每次都移动一下坐标系:


var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
context.line;
context.strokeStyle = "#cd2828";
 
//在(50,50)点绘制正方形
context.rect(50, 50, 30, 30);
 
//把坐标系向下、向右各移动50像素
context.translate(50, 50)
context.rect(50, 50, 30, 30);
 
//把坐标系继续向下、向右各移动50像素(变换是可以累积的)
context.translate(50, 50)
context.rect(50, 50, 30, 30);
 
context.stroke();

2,旋转变换(rotate)

下面通过绘制一系列旋转的正方形,生成类似方形螺线的图案。

原文:HTML5 - Canvas的使用样例5 (变换的使用)

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
context.line;
context.strokeStyle = "#cd2828";
 
//移动原点,接下来要围绕新原点旋转
context.translate(100, 100);
 
//绘制10个正方形
var copies = 10;
for(var i=1; i     //绘制正方形之前,先旋转坐标系
    //旋转一周是2pi,因此每个正方形的旋转角度取决于要绘制的总数
    context.rotate(2 * Math.PI * 1/(copies-1));
    //绘制正方形
    context.rect(0, 0, 60, 60);
}
 
context.stroke();

4,坐标系的保存与还原

(1)调用绘图上下文的save()方法可以保存坐标系当前的状态。然后调用restore()方法可以返回保存过的前一个状态。
(2)因为变换是累积的,我们在多步操作绘制复杂图形时,往往需要多次保存坐标系状态。如同浏览器历史记录一样,每次调用restore(),坐标系就会恢复到前一个最近的状态。

热门栏目