canvas学习笔记-绘图坐标系

Ashin 发布于2019-08-26 13:29 / 2365人阅读

摘要：坐标系画布左上角默认原点坐标向右方增长，坐标则向下方延伸图片来自不过，的坐标系统并不是一尘不变的，原点是可改变的。坐标变换可以对坐标系统进行移动旋转和缩放等操作。

1. 坐标系

画布左上角(0,0)默认原点 
x坐标向右方增长，y坐标则向下方延伸

(图片来自mdn)

不过，Canvas的坐标系统并不是一尘不变的，原点是可改变的。
 坐标变换：可以对Canvas坐标系统进行移动translate、旋转rotate和缩放等操作。
 坐标变换之后绘制的图形x,y偏移量都以新原点为准， 旋转角度，缩放比，以新坐标系角度为准

例如同样在原点位置写上文字（x:0,y:0）, 在（0,50）位置绘制一个矩形，坐标变换前后的效果如下：

这样， 当我们绘制多个图形时，既可以通过计算x，y偏移量控制图形的显示位置，也是通过变换坐标来做
 坐标变换是属于绘图状态存在Canvas绘图的堆栈中的，可以通过save,restore重置或更新坐标系

坐标示例

服务器托管海外云主机学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108906.html

从一个画板demo学习canvas

摘要：前言初学，做了一个画板应用，地址点这里。本篇为的一些基础思想和注意事项，不是基础。主要是在于事件上的实践经验屏兼容屏会使用多个物理像素渲染一个独立像素，导致一倍图在屏幕上模糊，也是这样，所以我们应该把画布的大小设为元素大小的或倍。前言初学canvas，做了一个画板应用，地址点这里。本篇为canvas的一些基础思想和注意事项，不是基础api。主要是在于touch事件上的实践经验 r...

netmou 2019-08-20 16:08 评论0 收藏0
canvas学习笔记-贝塞尔曲线

摘要：贝塞尔曲线提供了两个绘制贝塞尔曲线二次贝塞尔曲线，控制点终点三次贝塞尔曲线，控制点一控制点二，终点题外话贝塞尔曲线的数学基础是早在年就广为人知的伯恩斯坦多项式。的属性，取值就可以设置为一个三次贝塞尔曲线方程。 3.4 贝塞尔曲线 canvas提供了两个绘制贝塞尔曲线api: ctx.quadraticCurveTo(cpx, cpy, x, y); 二次贝塞尔曲线，(cpx, cp...

Sourcelink 2019-08-26 13:29 评论0 收藏0
WebGL three.js学习笔记使用粒子系统模拟时空隧道（虫洞）

摘要：学习笔记使用粒子系统模拟时空隧道本例的运行结果如图时空隧道演示地址的粒子系统的粒子系统主要是依靠精灵体来创建的，要实现中的粒子系统创建，一般有两种方式。 WebGL three.js学习笔记使用粒子系统模拟时空隧道本例的运行结果如图：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

Guakin_Huang 2019-08-23 17:10 评论0 收藏0