本文将引导你使用canvas和JavaScript创建一个简单的绘图程序。
首先准备容器Canvas元素，接下来所有的事情都会在JavaScript里面。
- <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>
获取绘图环境，context对象提供了用于在画布上绘图的方法和属性
- context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
开始绘图过程
首先我们需要存储绘图路径点坐标，addClick函数添加坐标点值到数组
- var clickX = new Array(); var clickY = new Array();
- var clickDrag = new Array();//存储路径点 var paint;//是否绘制，mousedown时置为true
- function addClick(x, y, dragging) {
- clickX.push(x); clickY.push(y);
- clickDrag.push(dragging); }
redraw函数每次调用整个canvas就会重新绘制一次。首先我们清空画布上内容，设置绘制线条颜色粗细线条连接方式。然后
两点之间绘制一段路径，将数组中的坐标点依次绘制出来
