JavaScript学习笔记（canvas绘图）

canvas绘图分为2d绘图和3d绘图(WebGL)，本篇主要梳理一下2d绘图相关的知识

1.canvas绘图依赖<canvas>标签作为画布

<canvas id="drawing" width=" 200" height="200">您的浏览器不支持canvas绘图功能</canvas> 

可以在元素上添加widht,height属性，也可以通过css添加样式
如果浏览去不支持canvas标签，就会显示标签里面的内容

2.要在canvas画布上绘图，首先要取得2d绘图上下文对象，通过调用getContext()方法，传入2d

var drawing = document.getElementById('drawing');
if(drawing.getContext){
	var context = drawing.getContext('2d');
}

先判断元素上是否有getContext方法，确定浏览器是否支持canvas绘图，因为有的浏览器不支持canvas标签会用其他标签代替，不会报错，所以要通过getContext方法判断

3.canvas2d绘图,就有两种绘图方式，描边(画线)和填充

<