赵工的个人空间

什么是canvas

Canvas是HTML5新增的一个标记，它从网页中划出一个区域，可以在其中生成实时图像，通过JavaScript可以对其中的每个像素进行操作。一般将Canvas称为画布，这是HTML5新特性中最有趣的一个， 可以在其中形成动画、绘制图像、播放视频，甚至进行三维图形渲染。当然对Canvas的操作也是最复杂、最多变的，内容繁杂，但能产生很多吸引人的有趣效果，需要单独加以关注。

在网页上使用画布Canvas很简单，只需要加上<canvas></canvas>，这个标记一般只需加入id和width、height属性，形式为：
<canvas id="canvas" width="500" height="300"> 你使用的浏览器不支持此功能 </canvas>
其中的id属性是必须的，为了在JavaScript中操作Canvas，要使用此id值；width和height为设置的Canvas的实际宽高像素值，这两个属性必须设置，且只能在Canvas中设置， 虽然可以使用CSS设置canvas的宽高属性，如： canvas{
    width:800px;
    height:600px;
}
但这是设置的显示界面宽高，如果其中设置的宽高与Canvas内部设置的不同，就会进行相应的压缩或拉伸。一般情况下，不需要在CSS中进行设置，这时会按Canvas内部的设置显示。
早期的浏览器很多并不支持Canvas功能，这时<canvas></canvas>之间的文字就会显示出来，而在支持Canvas功能的浏览器中，其中的文字就会被忽略。

对Canvas的操作，需要使用JavaScript来编程。首先是获得操作Canvas的上下文：
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
上面一句，使用document.getElementById('id')方法获取指定id属性值的Canvas引用，然后使用Canvas引用的getContext("2d")方法创建所需要的上下文，其中的"2d"表示进行二维绘图， 而进行三维绘图时一般使用"webgl"或"experimental-webgl"。不过这里只介绍二维绘图。
创建的Canvas绘图区域是由从上到下、从左到右的像素网格组成，其原点位于左上角，横坐标向右，纵坐标向下，这个坐标系以后都要用到。
获取Cnavas引用后，就可以使用canvas.width和canvas.height获得Canvas的宽和高，这是canvas标记中定义的宽高属性，JavaScript编程时需要这两个值。