canvas的基本用法

canvas的默认高宽

默认width：300px；默认height：150px；

什么是canvas（画布）

<canvas>是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图像；
例如：它可以用于绘制图形，创建动画。
<canvas>最早由Apple引入Webkit
使用<canvas>标签时，建议要成对出现，不要使用自闭合形式。

canvas的默认背景颜色

它的默认背景颜色继承body的背景颜色。

canvas画布的内容位置

canvas画布的内容在canvas标签的上面，而不是在两个标签里面。

不支持canvas的浏览器会显示canvas标签里面的内容，
支持canvas的浏览器不会显示标签里面的内容。

<canvas id="test">
	<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>

canvas标签的两个属性

canvas跟img标签很像有width和height两个属性。
设置width和height不要通过css来设置，而是在canvas标签里面进行设置；

<canvas id="test" width="300" height="300">
	<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>

canvas的渲染上下文：getContext()方法

<canvas>元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，我们需要找到他的渲染上下文；

getContext()

<canvas>元素有一个getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。
getContext()只有一个参数，上下文的格式
获取方式：

var canvas = document.getElementById('box');
var ctx = canvas.getContext('2d');

检查支持性：

var canvas = document.getElementById('box');
if(canvas.getContext){
	var ctx = canvas.getContext('2d');
}