版权声明：一只会飞的狼 https://blog.csdn.net/sinat_40697723/article/details/83744161
一.旋转与变形
1.变形方法：
| 方法 | 说明 |
| setTransform(m11,m12,m21,m22,dx,dy) | 变形矩阵的指定（清空先前的指定） |
| transform(m11,m12,m21,m22,dx,dy) | 变形矩阵的指定（可重复指定） |
| rotate(angle) | 旋转 |
| scale(x,y) | 扩大/缩小 |
| translate(x,y) | 移动/变形 |
| 方法 | 说明 |
| save() | 记录变形矩阵的状态 |
| restore() | 恢复变形矩阵的状态 |
2.移动与扩大/缩小：
语法：
context.scale(x,y); x为长度缩放的比例，y是宽度缩放的比例
context.translate(x,y); (x,y)为基点移动后的坐标
例子1：
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
//获取上下文
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
//声明绘制矩形的函数
function drawRect(context,color){
context.fillStyle = color;
context.fillRect(20,20,50,50);
}
//绘制普通的矩形
drawRect(ctx,"red");
//移动矩形以及扩大/缩小矩形
ctx.translate(30,30); //绘制基点变成了(50,50)
ctx.scale(2.5,0.8);
//绘制第二个矩形
drawRect(ctx,"green");
</script>效果图：
3.旋转
语法：
context.rotate(angle);
其中angle是弧度，red = deg*Math.PI/180;
例子：下面的实例结合了上一节的save()方法、restore()方法，以及本节的rotate()方法的应用。通过移动/旋转等方式，分别绘制三个长方形。
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
//获取上下文
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
//定义描绘矩形的函数
function drawRect(context,color){
context.fillStyle = color;
context.fillRect(0,0,100,30);
}
//定义旋转函数
function rotateDeg(context,deg){
var rad = deg*Math.PI/180;
context.rotate(rad);
}
//绘制普通的矩形
drawRect(ctx,"red");
//指定移动旋转后绘图
ctx.save(); //保存状态
ctx.translate(100,30); //移动基点
rotateDeg(ctx,45); //旋转45度
drawRect(ctx,"blue");
ctx.restore();
ctx.translate(200,50);
rotateDeg(ctx,0);
drawRect(ctx,"green");
ctx.restore();
</script>效果:
注意：ctx.save()是保存当前状态（包括原点坐标，角度等等），ctx.restore()是返回最后一次保存的状态。
二.绘制文本
canvas不仅可以绘制图像，还可以绘制文本。
| 方法 | 说明 |
| context.fillText(text,x,y) | 描绘文本 |
| context.fillText(text,x,y,maxWidth) | |
| context.strokeText(text,x,y) | 描绘文件的轮廓 |
| context.strokeText(text,x,y,maxWidth) |
参数text是将要描绘的文本，参数x和y指定了描绘位置的坐标。默认情况下，以描绘对象的左下为基准。参数maxWidth是可选的，其指定数值后，文本将显示在指定的宽度内。
| 属性 | 说明 |
| context.font | 定义文本的样式。与CSS的font属性设置的内容相同 |
| context.textAlign | 定义文本的对齐方式，可指定start,end,left,right,center等 |
| context.textBaseline | 定义文件的基准线，可指定top,hanging,middle,alphabetic,bottom等 |
例子1：在此例中对同一个文本先后使用蓝色描绘文字轮廓，红色描绘文字，最后缩小宽度成一固定值并用绿色描绘文字。
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
//获取上下文
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
//定义文本
var text = "在Canvas中进行文本描绘";
//定义文本的字型
ctx.font = "24px 'Arial'";
//描绘文字的轮廓
ctx.strokeStyle = "blue";
ctx.strokeText(text,10,40);
//描绘文字
ctx.fillStyle = "red";
ctx.fillText(text,10,85);
//固定宽度
ctx.fillStyle = "green";
ctx.fillText(text,10,130,150);
</script>效果图：
对齐方式：将上面的文本改成居中对齐方式。
例子2：
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
//获取上下文
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
//定义文本
var text = "在Canvas中进行文本描绘";
//定义文本的字型
ctx.font = "24px 'Arial'";
//居中对齐,这里设置为居中对齐，那么下面的坐标就是中心坐标，而不是左下角坐标
ctx.textAlign = "center";
//描绘文字的轮廓
ctx.strokeStyle = "blue";
ctx.strokeText(text,canvas.width/2,canvas.height/2);
</script>效果:
基准线
文本的垂直方向使用textBaseline属性来定义：top(字顶端)、middle(字中央)、bottom(字底部)、hanging(罗马字上缘)、alphabetic(罗马字基线)、ideographic(罗马字下缘)。
三.canvas实现动画效果
- 圆球跳动的动画：
<canvas width="300" height="300" id="can"></canvas> <script type="text/javascript"> function getId(id){ return typeof(id) === 'string' ? document.getElementById(id) : id; } var canvas = getId("can"); var ctx = canvas.getContext("2d"); var ball = {x:10, y:100, dir_x:5, dir_y:5}; setInterval(drawBall, 50); function drawBall(){ //描绘背景 ctx.fillStyle = "white"; ctx.fillRect(0,0,300,300); //绘制圆球 ctx.beginPath(); ctx.arc(ball.x, ball.y, 6, 0, Math.PI*2); ctx.fillStyle = "red"; ctx.fill(); //让圆球动起来 ball.x += ball.dir_x; ball.y += ball.dir_y; if (ball.x <=0 || ball.x >= 300) { ball.dir_x *= -1.2; } if (ball.y <=0 || ball.y >= 300) { ball.dir_y *= -1.2; } } </script>效果：
2.绘制待机动画：
<canvas width="300" height="300" id="can"></canvas>
<script type="text/javascript">
function getId(id){
return typeof(id) === 'string' ? document.getElementById(id) : id;
}
var canvas = getId("can");
var ctx = canvas.getContext("2d");
var ci = 0;
anim();
function anim(){
ctx.clearRect(0,0,300,300);
for(var i=0; i<36; i++){
ctx.save();
var r = (i*10)*Math.PI/180;
ctx.translate(150,150);
ctx.rotate(r);
//绘制细长方形
if (i === ci) {
ctx.globalAlpha = 1.0;
} else {
ctx.globalAlpha = 0.3;
}
ctx.beginPath();
ctx.fillStyle = "green";
ctx.rect(0,0,50,6);
ctx.fill();
ctx.restore();
}
ci = (ci + 1) % 36;
//每隔一段时间调用函数本身，实现动画效果
setTimeout(anim, 50);
}
</script>效果图:
注意：绘制动画每一次循环都别忘了清空canvas。