标签：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 旋转坐标，最后在旋转后的坐标系上，绘制图形。

canvas转移坐标轴

旋转坐标轴

标签：web,canvas,旋转,坐标轴,绘图,中心点,左上角,矩形
来源： https://blog.csdn.net/mrbbcool/article/details/104778496

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。