变形 移动 旋转 和缩放
移动Translating
它用来移动 cnvas 和它的原点到一个不同的位置。
translate(x, y)
translate
方法接受两个参数。x 是左右偏移量,y 是上下偏移量,
在做变形之前先保存状态
translate的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="application/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
ctx.save();//保存当前的状态到盏中
ctx.fillStyle='rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';//设置颜色
ctx.translate(10+j*50,10+i*50);//设置平移的点
ctx.fillRect(0,0,25,25);//绘制正方形
ctx.restore();//从盏中拿出之前保存的状态
}
}
}
</script>
</html>
旋转Rotating
rotate
方法,它用于以原点为中心旋转 canvas。
rotate(angle)
只接受一个参数:旋转的角度(angle)顺时针方向的 ,以弧度为单位的值
旋转的中心点始终是canvas的原点,要改变需要用translate方法
rotate的例子
两层循环。第一层循环决定环的数量,第二层循环决定每环有多少个点。每环开始之前,我都保存一下 canvas 的状态,这样恢复起来方便。每次画圆点,我都以一定夹角来旋转 canvas,而这个夹角则是由环上的圆点数目的决定的。最里层的环有 6 个圆点,这样,每次旋转的夹角就是 360/6 = 60 度。往外每一环的圆点数目是里面一环的 2 倍,那么每次旋转的夹角随之减半。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="application/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75)//改变原点的位置
//设置环数
for(var i=1;i<6;i++){
//保存状态到盏中
ctx.save();
//设置颜色
ctx.fillStyle= 'rgb('+(51*i)+','+(255-51*i)+',255)';
//每环有多少个点
for(var j=0;j<i*6;j++){
//旋转角度
ctx.rotate(Math.PI*2/(i*6));
//开始一条路径
ctx.beginPath();
//绘制圆形
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
//填充颜色
ctx.fill();
}
ctx.restore();
}
}
</script>
</html>
缩放
scale(x,y)
scale
方法可以缩放画布的水平和垂直的单位。两个参数都是实数,可以为负数,x 为水平缩放因子,y 为垂直缩放因子,如果比1小,会比缩放图形, 如果比1大会放大图形。默认值为1, 为实际大小。
缩放因子以像素为单位正常为1,缩小则小于1方法则大于1
scale的例子
用缩放的方式来绘制图形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="application/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// 画一个简单的矩形,但要缩放它
//保存到盏里边
ctx.save();
// 左右放大10倍上下放大3倍
ctx.scale(10, 3);
//绘制一个长方形
ctx.fillRect(1, 10, 10, 10);
// 从盏中拿出当前状态
ctx.restore();
// 水平镜像
ctx.scale(-1, 1);
//设置文本大小样式
ctx.font = '48px serif';
//绘制文本
ctx.fillText('MDN', -135, 120);
}
</script>
</html>
变形
transform(a,b,c,d,e,f)
这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵,如下面的矩阵所示:
如果任意一个参数是infinity【最大值】变形矩阵也必须被标记为无限大否则会抛出异常
a (m11)
水平方向的缩放
b(m12)
水平方向的倾斜偏移
c(m21)
竖直方向的倾斜偏移
d(m22)
竖直方向的缩放
e(dx)
水平方向的移动
f(dy)
竖直方向的移动
setTransform(a, b, c, d, e, f)
该方法是取消了当前变形,然后设置为指定的变形,一步完成。
resetTransform()
重置当前变形为单位矩阵,它和调用以下语句是一样的:ctx.setTransform(1, 0, 0, 1, 0, 0);
transform/setTransform例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="application/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
//绘制一个矩形
ctx.translate(100, 100);
var c = 0;
for (var i=0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
//设置颜色
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
//填充绘制矩形
ctx.fillRect(0, 0, 100, 10);
// 设置变形
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
//恢复成不变形时的状态重新变形
ctx.setTransform(-1, 0, 0, 1, 100, 100);
// 设置颜色
ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
// 绘制矩形
ctx.fillRect(0, 50, 100, 100);
}
</script>
</html>