①Canvas概述

（2）Canvas元素知识

HTML5 Canvas，简单来说，就是一门实用JavaScript来操作Canvas元素的技术。使用Canvas元素来绘制图形，需要以下三步。 

<canvas id="canvasId" width="200px" height="150px" style="border:1px dashed gray;"></canvas>

1.获取Canvas对象。

    var cnv = document.getElementById("canvasId");//获取一个DOM对象canvas

2.获取上下文环境对象（context）。

    var cxt = cnv.getContext("2d");//使用canvas对象的getContext("2d")方法

3.开始绘制图形。

    cxt.moveTo(50,100);

    cxt.lineTo(150,50);

    cxt.stroke();

1.2.1 Canvas元素

Canvas是一个行内块元素（即inline-block），我们一般需要指定其三个属性：id、width和height。width和heigth分别定义Canvas的宽度和高度。默认情况下，宽度为300px，高度为150px。

在实际开发中，我们一定不要再CSS样式汇中定义canvas的宽高，而是应该在HTML属性中定义。如果再CSS样式中定义，canvas对象获取的宽度和高度是默认值，而不是实际的宽高。获取canvas对象实际的宽度和高度是开发中最常用的操作，因此我们一定要在HTML属性中定义。

1.2.2 Canvas对象

使用documentGetElementById()方法来获取canvas对象。

canvas对象常用属性：

width:宽度

height:高度

canvas对象常用方法：

getContext("2d")：获取canvas 2D上下文环境对象，暂时只提供2D绘图API，3D绘图可使用H5中的WebGL，但技术要求高。

toDataURL()：获取canvas对象产生的位图的字符串