一、介绍
1、是HTNL5重要元素,不需要外部插件支持,提供了强大的图形处理功能,常用于移动端web的开发;
2、基本现代浏览器都支持,IE8以下不支持
3、进行绘制,是通过context环境进行操作的
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
4、坐标系
横轴向右为正,纵轴向下为正;
二、基本图形绘制
1、基础
●beginPath() 开始绘制;
●moveTo(x,y) 设置绘制起点;
●lineTo(x,y) 设置下一个点;
●closePath() 结束绘制,会从当前点回到结束点,形成一个封闭的图形;
●strokeStyle 设置绘制的样式;
●stroke() 绘制点之间的路线;
●fillStyle 设置填充样式;
●fill() 填充当前绘图;
●lineWidth 线宽;
2、绘制直线
context.beginPath(); //开始绘制
context.moveTo(0,0); //设置起点
context.lineTo(100,100); //设置下一个点
context.closePath(); //结束绘制
context.s