canvas-入门

定义

canvas是HTML5新增的一个重要元素，先看下它的定义：

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations.

大意：

使用JS脚本可以绘制图形、简单的动画

注：canvas只是一个普通无色透明区域，可理解为画布，同时绘制图形不是用鼠标，而是用JS脚本。

因为是新增元素，兼容性方面如下：

页面添加canvas

<canvas id="j-canvas" width="400" height="300">    不支持canvas</canvas>

注：

1. 对不支持的浏览器显示，"不支持canvas"文案
2. canvas不像img标签，canvas需要结束标签 < /canvas>
3. canvas可以应用border、background-color、margin等属性
4. canvas在没有指定宽高时，默认300 * 150

操作canvas

// 获得canvasvar canvas = document.getElementById('j-canvas');// 获得画布var ctx = canvas.getContext('2d');

检测支持性

var canvas = document.getElementById('j-canvas');if (canvas.getContext) {  var ctx = canvas.getContext('2d');  // 支持处理} else {    // 不支持处理}

坐标系

既然我们要在canvas上画东西，肯定要知道画的位置，所以就牵扯到坐标系的东西。 在canvas中坐标系分2D、3D坐标系统，除了默认的还有 坐标系转换 的概念，我们这次只探讨2D默认坐标系，如下：