web前端入门（二）-canvas绘图

1.canvas中绘制的图形，坐标都是相对于canvas元素的左上角坐标，canvas左上角为（0，0）坐标点。如下图中，中绘制了个矩形，该矩形左上角相对于 canvas 的左边距为 W2 ,上边距为 H2，则该矩形左上角顶点坐标为（W2,H2）。

2.使用 rotate 旋转坐标时，默认以 canvas 的 左上角为中心点。例如要使绘制的矩形绕矩形中心点旋转，如果直接使用

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.rotate（30）

表示以canvas左上角为原点旋转30度，在此坐标轴上绘制出的矩形如图所示。

canvas原始坐标轴

直接旋转的坐标轴

如果要转换中心点，需要先使用 translate（W2+R/2,H2+R/2） 转换中心点，然后在该中心点使用 rotate 旋转坐标，最后在旋转后的坐标系上，绘制图形。