概念：
绘制图形的时候，我们，可能经常会想要旋转图形，或者对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，可以实现这种效果。
默认情况下，Canvas画布的最左上角对应于坐标轴的原点（0，0），并且是以一个像素为坐标单位进行绘制的！
对坐标的变换处理，有以下三种方式：
平移
使用图形上下文对象的translate方法移动坐标轴原点，定义是这样的：context.translate(x,y)，其中x代表坐标轴原点向左移动多少个单位，y代表坐标轴原点向下移动多少个单位！
扩大
使用图形上下文对象的scale方法将图形放大，定义是这样的：context.scale(x,y)
旋转
使用图形上下文对象的rotate方法将图形进行旋转，定义是这样的：context.rotate(angle)，且旋转是以顺时针方向进行的，想要逆时针的话，改成负号即可！
应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>变形图形</title>
<script>
function draw(id){
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#fff";
context.fillRect(0,0,400,300);
context.translate(200,50);
context.fillStyle='rgba(255,0,0,0.25)';
for(var i=9;i<50;i++)
{
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/10);
context.fillRect(0,0,100,50);
}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
代码引用
版权声明：本文为CSDN博主「傲世阿龍」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010383937/article/details/72777953