摘要：首先看红色框中的第一行代码，执行后坐标系是这样的第二行代码旋转后是这样的注意看此时轴和轴已经改变，以及正方向的方向。
首先，当我们在页面上初始化canvas时，相当于在上面放了一块画布，这块画布我们可以理解为上面有一个坐标系(如下图)，左上角是原点，往右是X轴的正方向，往下是Y轴的正方向，我们在画布上绘制的内容都是基于这个坐标系完成，但是有时候我们需要对绘制的内容进行调整，例如将上面的一个图形旋转某个角度，或者在画布正中心画一个图形，我们就可以通过translate和rotate将坐标系进行移动之后再进行绘制.
还有，rotate的旋转是以原点为基准进行旋转，，这一点很重要
| 函数 | 参数 | 描述 |
|---|---|---|
| translate | dx,dx | 将坐标系在X轴和Y轴移动的距离 |
| rotate | angle | 坐标系旋转的角度，顺时针为正,，逆时针为负 |
| save | 保存当前坐标系的状态 | |
| restore | 恢复上一次坐标系状态 |
当我们不对画布进行旋转和移动的时候，在上面绘制一个矩形，是这样子的
可以看到此时是基于左上角进行绘制的，如果我们用translate将它向右和向下移动200px和100px呢
可以看到，画布位置没有改变，我们移动的只是坐标系，如果我们继续在上面绘制图形，仍然是以现在这个位置的坐标系为准，如果我们只想在这个位置画一次之后就恢复坐标系原始位置，我们应该在移动之前调用save()保存状态，绘制后调用restore()恢复.
如果我们想将最开始的矩形以自身中心旋转90°呢，想看代码和效果图
emmmm...没有计算好，导致有点跑偏，但是它还是以自己为中心转了90°，但是没事，不影响理解rorate和translate这两个函数配合的理解。
首先看红色框中的第一行代码，执行后坐标系是这样的
第二行代码旋转后是这样的
注意看此时X轴和Y轴已经改变，以及正方向的方向。第三行代码执行后如下
为什么会往右上方跑呢？因为我们translate中的参数是负数，而此时坐标轴的正值方向是左边和下边，所以是往右边和上边跑
为什么原点会跑出画布之外？因为X轴移动的距离是width/2，而竖直方向空间不足，就继续往上走了。
通过坐标系来说明这两个函数主要是因为最近做的一个项目中需要将画布上面绘制的图片以图片自身为中心旋转90°或者180°，而看了许多博客后比较少通过坐标系来讲解这两个函数，尝试了很久之后发现通过坐标系来理解虽然麻烦，但是感觉简单点。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54521.html
摘要：首先看红色框中的第一行代码，执行后坐标系是这样的第二行代码旋转后是这样的注意看此时轴和轴已经改变，以及正方向的方向。 首先，当我们在页面上初始化canvas时，相当于在上面放了一块画布，这块画布我们可以理解为上面有一个坐标系(如下图)，左上角是原点，往右是X轴的正方向，往下是Y轴的正方向，我们在画布上绘制的内容都是基于这个坐标系完成，但是有时候我们需要对绘制的内容进行调整，例如将上面的...
摘要：但需要注意的是，需在使用前调用。当然，你愿意的话也可以两者结合着用。绘制图像相信很多入门的，都看不到这个地方，不就是绘制图像的嘛，啊不准确，是绘制图形的。明确的说，是指围绕原点图像旋转弧度。 前言 本文写在七月底，进来不加班就整理了一下，一些非常基础的知识，对于canvas刚入门的人来说，值得阅读一下。 来个气势如虹的开头 与看各种文章相比，我更喜欢数学里的逻辑；与学习各种日新月异的框...
摘要：比如弧线或圆形从到绘制一条以为圆心，为半径的弧线，其中和用弧度表示，为时，顺时针画弧线，反之，逆时针画弧线。 最近笔者在学习HTML5的新元素，会分享一些基础知识以及小例子，最终使用实现一个绘制简单图表（条形图、线图或者饼图）的js库，会更新一到两篇文章~下面我们开始吧~ 确认宽度和高度 我们首先应该指定标签即画布的宽度和高度属性，并在开始和闭合标签之间添加后备信息： ...
阅读 2055·2021-11-24 10:28
阅读 1093·2021-10-12 10:12
阅读 3310·2021-09-22 15:21
阅读 662·2021-08-30 09:44
阅读 1867·2021-07-23 11:20
阅读 1124·2019-08-30 15:56
阅读 1721·2019-08-30 15:44
阅读 1467·2019-08-30 13:55
