利用canvas绘制图形

Posted 2020-10-08

    绘制图有很多种方法，可以借助flash实现，也可以使用SVG和VML来绘图。本章将要学习一种新的绘图方法——使用Canvas元素，它是基于html5原生的绘图功能。使用Canvas元素，可以绘制图形，也可以实现动画。它方便了使用javascript脚本的前端开发人员，寥寥的竖行代码，就可以在Canvas元素中实现各种图形及动画。本章将介绍如何使用Canvas元素来绘制一些简单的图形。
本章主要知识点如下：
·认识Canvas元素
·使用Canvas绘图
·Canvas与JavaScript之间的互动
·利用Canvas实现网页中的动画

10.1 认识Canvas
    HTML5的Canvas元素有一套绘图API（即接口函数），自成体系。
    JavaScript就是通过调用这些绘图API来实现绘制图形和动画功能的。
10.1.01 Canvas的历史
    在HTML5以前的标准中，有一个缺陷，就是不能直接动态地在HTML页面中绘制图形。若要在页面中实现绘图，或者是非常复杂的页面实现（使用大量的Javascript代码），要么借助第三方工具实现（如Flash、SVG、VML等）。这种做法无疑是把问题复杂化了。

在互联网应用不断发展中，页面绘制使用的越来越多。
在未来的发展趋势上，也需要HTML自己完成绘图功能，
Canvas元素应运而生。
    Canvas元素是为了客户端矢量图形而设计的。
    它自己没有行为，但却把一个绘图API展现给客户端Javascript；使脚本能够把想绘制的东西都绘制到一块画布上。Canvas的概念最初有苹果公司提出，并在Safari1.3Web 浏览器中首次引入。随后Firefox 1.4 和 Opera9两款浏览器都开始支持Canvas绘图。目前IE9以上版本也已经支持这项功能。Canvas的标准化正由一个Web浏览器厂商的非正式协会在推进，目前Canvas已经成为HTML5草案中一个正式的标签。

10.1.02 Canvas与SVG,以及VML之间的差异
    Canvas有一个基于Javascript的绘图API,而SVG和VML使用一个XML文档来描述绘图。Canvas与SVG,以及VML的实现方式不同，但在实现上可以互相模拟。
    Canvas有自己的优势，由于不存储文档对象，性能较好。
    但若要移除画布里的图形元素，往往需要擦掉绘图从新绘制它。

10.2 Canvas基本知识
    在网页上使用Canvas元素，像使用其他HTML标签一样简单，然后利用JavaScript脚本调用绘图API,绘制各种图形。
Canvas拥有多种绘制路径、矩形、圆形、字符，以及添加图像的方法，还能够实现动画。
 
10.2.01 构建Canvas元素
    Canvas元素是以标签的形式应用到HTML页面上的。在HTML页面中放入：
    <canvas></canvas>
    不过Canvas毕竟是个新东西，很多旧浏览器都不支持。为了增加用户体验，可以提供替代文字，放在Canvas标签中。例如：
    <canvas>你的浏览器不支持该功能!</canvas>
    当浏览器不支持Canvas时，标签里的文字就会显示出来。跟其他HTML标签一样，Canvas标签有一些共同的属性：
    <canvas id="canvas" width="200" height="200">你的浏览器不支持Canvas标签功能</canvas>
    其中，id属性决定了Canvas标签的唯一性，方便查找。width和height属性分别决定了Canvas的宽和高，其数值代表了Canvas标签内包含了多少像素。
    Canvas标签可以和其他标签一样应用CSS样式表。如果在头部的样式表中添加如下样式：
    canvas{
        border:1px solid #CCC;
    }
    可以使用CSS样式来控制Canvas的宽和高，但Canvas内部的像素点还是根据Canvas自身的width和height属性确定，默认是宽300像素，高是150像素。用CSS设置Canvas尺寸；只能体现Canvas占用的页面空间，但是Canvas内部的绘图像素还是由width和height属性来决定的。这样会导致整个Canvas内部的图像变形。
    
10.2.02 使用JavaScript实现绘图的流程
    Canvas元素本身是没有绘图能力的。所有的绘制工作必须在Javascript中完成。前面讲过，Canvas元素提供一套绘图API。在开始绘图之前，先要获取Canvas元素的对象，再获取一个绘图上下文，接下来就可以使用绘图API中丰富的功能了。
    1.获取Canvas对象
    在绘图之前，首先需要从页面中获取Canvas对象，通常使用document对象的getElementById()方法获取。例如，以下代码就是获取id为“canvas”的Canvas对象。
    var canvas = document.getElementById("canvas");
    开发者还可以使用通过标签名称来获取对象的getElementByTagName()方法。
    2.创建二维的绘图上下文对象。
    Canvas对象包含了不同类型的绘图API,还需要使用getContext()方法来获取，接下来要使用的绘图上下文对象。
    var content=canvas.getContext("2d");
    getContext对象是内建的HTML5对象，拥有<F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12>

10.3 使用Canvas绘图
10.3.01 绘制矩形
10.3.02 绘制路径
10.3.03 图形组合
10.3.04 绘制曲线
10.3.05 使用图像
10.3.06 剪切区域
10.3.07 绘制渐变
10.3.08 描边属性
10.3.09 模式
10.3.10 变换
10.3.11 使用文本
10.3.12 阴影效果
10.3.13 状态保存与恢复
10.3.14 操作像素