本帖最后由 东京没有友美热 于 2015-11-8 14:43 编辑

        Web之前有一些常见的绘图方式，如Adobe Flash、SVG和VML，此次HTML5元素新添加的Canvas实际上是一个位图画布（bitmap canvas）。与SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。


        Canvas能够成为Web绘图标准，原因有二：其一，由于不用存储画出的每一个元素，所以性能更好；其二，与其他语言的二维绘图API类似，Canvas更容易实现。


        很多时候，大家都不太注重原理性的文章，我们希望读者能够拥有很强的动手能力，但是我们也非常希望读者在动手的时候能够明白一件事情的工作原理。因此，本章特意列出一节，简单讲解Canvas的工作原理。


        众所周知，Canvas主要是用来画图的，但是Canvas并不非常注重动画。目前世面上所有的Canvas动画完全取决于开发人员的水平和功力。在Canvas中没有帧（frame）的概念，没有精灵（sprite）的概念，很多惯用Flash做动画的人所熟知的概念在Canvas中都不存在。但是Canvas的无插件跨平台运行能力是Flash无法比拟的。


        基于Canvas的绘图并不是直接在Canvas标记所创建的绘图画面上进行各种绘图操作，而是依赖画面所提供的渲染上下文（rendering context），所有的绘图命令和属性都定义在渲染上下文当中。当使用Canvas的getContext("2d")方法时，其返回的是CanvasRenderingContext2D对象，其内部表现为笛卡儿平面坐标，并且左上角坐标为(0, 0)。注意：在利用Canvas画图时，通过Canvas的ID属性获取相应的DOM对象之后要做的事情就是获取Context对象。


        渲染上下文与Canvas是完全对应存在的，无论对同一Canvas对象调用几次getContext()方法，都将返回同一个渲染上下文对象。目前，所有支持Canvas的浏览器都支持2D渲染上下文。


        Canvas 绘图是一种像素级的位图绘图技术，Canvas标签只是在网页中定义了一块矩形区域，


        开发者使用JavaScript完成各种图形绘制操作。


        注意 目前网上一些声称Canvas是矢量绘图的说法是错误的，无论Canvas是直接载入图片还是绘制一个线条，其最终表现结果都是一个位图，绝非有些文章所说的矢量图，这是原理性常识，请读者自鉴。


        在所有状态模式下绘图都会有一个绘图状态，Canvas的绘图状态内容很丰富。在介绍Canvas的绘图状态时，如果有读者对绘图状态这个词不太了解，可以借助状态一词的中文解释去理解。这里，显摆一下我们对语言的理解：状态，就是所处的状况，是空间和自身表现的描述，对状态所处时间的定义则不明，按需而定。


        每个渲染上下文都是一个绘图状态的集合（堆），绘图状态包含变形矩阵（transform matrix）、裁剪区域（clipping region）及众多的属性。但是，当前路径和当前位图不是绘图状态的一部分，当前路径是持久存在的，仅能被beginPath()、closePath()复位，当前位图是Canvas的属性，而非渲染上下文的。


        在学习Canvas绘图的过程中，常常会有人对Canvas的restore和save的作用理解不明，而且对绘制与擦除行为也存在疑惑，


        下图对这些疑惑给出了解释，并对绘图的先后关系、上下关系、合成等做了解释。

登录/注册后可看大图

225832lv0psv82o1vspnnn.png (12.44 KB, 下载次数: 0)

下载附件  

3 天前 上传

        由此可知，最早发出的命令，在最下；堆叠后不可逆向；擦除行为是针对某一区域下所有已绘内容的。


        Canvas坐标系统说明


        前文已经说过，Canvas的本质是一个笛卡儿坐标系统，本节将详细说明这一点。矩形区域的左上角为坐标原点(0,0)，向右为x轴，向下为y 轴。


        Canvas绘图坐标系统如下图所示：

登录/注册后可看大图

230113a9q8wrki938ik8dq.png (48.44 KB, 下载次数: 0)

下载附件  

3 天前 上传

        从这张图中可以看到，生活中常用的坐标和定位方式已经发生变化了。在Canvas作图概念中，没有负坐标，只有正坐标。而且，坐标的起点在左上角以(0,0)坐标开始。由于起点是左上角，因此，任何图形的绘制都是向右向下的。初学者容易在这个坐标系统上犯错误，希望大家注意这一点。


        Canvas属性说明


        Canvas有各种属性，这些属性的名称和简单描述如下：


        fillStyle 填充属性，主要为填充方法服务


        strokeStyle 绘制属性，主要为绘制方法服务


        font 字体样式定义


        globalAlpha 图形透明度设置


        globalCompositeOperation 前后绘制的图形组合显示的效果


        lineCap 线帽


        lineJoin 两条线段连接处的样式，它可以有3种选择，即round、bevel和miter，与


        lineCap是组合属性，默认是miter


        lineWidth 线的宽度


        miterLimit 定义斜连线长度和线条宽度的最大比率，这个属性只有当lineJoin='miter'时才有


        shadowBlur 阴影模糊


        shadowColor 阴影色彩


        shadowOffsetX 阴影横向偏移


        shadowOffsetY 阴影纵向偏移


        textAlign 文本水平对齐


        textBaseline 文本垂直对齐


        注意，上面的属性名称中凡是有global字样的，如globalAlpha，都是全局属性，在使用时一定要注意先save()再restore()，即如果使用了save()方法，就一定要有restore()方法与之对应。

本主题由 bobby 于 3 天前 审核通过

回复

返回