<canvas>是 HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。
思路：
- 尝试在画布上先用鼠标画点，获取鼠标点击时的x，y坐标，添加给“点”
- 将点连成线，即鼠标移动时打点（点成线原理）。这里我们需要的是鼠标按下，移动打点，松开停止（3个事件，但是只需要一个状态，就是鼠标移动事件在鼠标点击事件后，且鼠标松开时停止）缺点：不能连续打点，移动过快时断点
document.onmousedown=function(){} //鼠标点击事件
document.onmousemove=function(){} //鼠标移动事件
document.onmouseup=function(){} //鼠标松开事件
这时，就需要用到HTML5新标签<canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //获取上下文在“2d”平面内
//这里必须现有颜色，再有图形
ctx.fillStyle = 'xxx'; //填充颜色
ctx.fillRect(x1, y1, x2, y2); //画正方形x1，y1左上角坐标x2，y2右下角坐标
ctx.strokeReact(x,y,w,h); //描边
注：不要使用CSS控制<canvas>初始宽高（等比例缩放）
除了可以直接画正方形外，还可以画是三角形：
ctx.beginPath(); //开始
ctx.moveTo(x,y); //从哪开始
ctx.lineTo(x,y); //第一条线
ctx.lineTo(x,y); //第二条线
ctx.fill(); //闭合
画线需要在线终点加上：
ctx.beginPath(); //开始
ctx.moveTo(x,y); //从哪开始
ctx.lineTo(x,y); //线
ctx.stroke();//描边 画线必须加
ctx.closePath(); //结束
ctx.linewidth='xx';//更改线宽
画圆：
ctx.beginPath(); //开始
ctx.arc(圆心x,圆心y,半径r,起点,终点);//Math.PI 与π相关，此时顺时针
ctx.fill();//填充 ctx.stroke();//描边
此时，就可以使用<canvas>标签完成画板的制作。
- 创建画线函数，将第一点（mousedown）与第二点（mousemove）连线，第三点（mousemove）连线，最后与（mouseup）连线。
- 定义变量用来记录第一点坐标，第二点坐标并更新。
canvas.onmousedown=function(aaa){
var x=aaa.clientX;
var y=aaa.clientY;
using=true; //判断是否正在画画
if(eraserOn){
hua.clearRect(x-5,y-5,30,30);//这个是给“hua”加的动作，并且不带px单位
}else{
star={x:x,y:y};
dian(x,y,r);
}
};
//鼠标移动事件
canvas.onmousemove=function(aaa){
if(using){
var x=aaa.clientX;
var y=aaa.clientY;
var newStar={x:x,y:y}; //新点坐标
if (eraserOn){
hua.clearRect(x-5,y-5,30,30);
}else{
line(star.x,star.y,newStar.x,newStar.y); //定义的线函数
dian(x,y,r); // 定义的点函数
star=newStar;//将新点覆盖旧点
}
}
};
//鼠标松开事件
canvas.onmouseup=function(aaa){
using=false;
};
//点的函数
function dian(x,y,r){
hua.beginPath();
hua.arc(x,y,r,0,Math.PI*2);
hua.fill();
}
//线的函数
function line(x1,y1,x2,y2){
hua.beginPath();
hua.moveTo(x1,y1);
hua.lineWidth=lw; //线宽
hua.lineTo(x2,y2);
hua.stroke();//先必须用stroke，不能用fill
hua.closePath();
}
此时，就可以实现更改画笔粗细（线宽），更改画笔颜色（填充颜色），橡皮擦功能（画笔颜色为透明），清屏（画布覆盖）和保存（a标签）功能。
//点击清屏事件
var delObj=document.getElementById("del");
delObj.onclick=function(){
hua.clearRect(0,0,canvas.width,canvas.height);
};
/************************************************************************/
//点击保存
var saveObj=document.getElementById("save");
saveObj.onclick=function () {
var hf=canvas.toDataURL("image/png");
//使用a标签的下载功能
var a=document.createElement("a");
document.body.appendChild(a);
a.href=hf;
a.download="我的作画";
a.target="_blank";
a.click();
};
兼容移动端
重点：在移动端页面必须添加的 meta:vp + Tab
监听手指触摸移动事件：
xxx.ontouchstart=function(){}; //触摸
xxx.ontouchmove=function(){}; //移动
xxx.ontouchend=function(){}; //结束
使用特性检测判断当前设备是否支持触屏（还可以使用媒体查询）
触屏设备 xxx.ontouchstart ==> null
非触屏设备 xxx.ontouchstart ==> undefined
或者使用 “in” 操作符判断某某属性是否存在
遇到的问题与解决方法
-
<canvas>画板宽高问题
//给画板全屏模式
var pageWidth=document.documentElement.clientWidth;
var pageHeight=document.documentElement.clientHeight;
canvas.width=pageWidth;
canvas.height=pageHeight;
注意：由于行内块级元素的特性，此时会出现滚动条，需要更改 <canvas> 的对其方式：vertical-align:top;
移动端出现滚动条
通过给<canvas>添加固定定位其中鼠标点击事件的
clientX/Y是相对于整个文档（视口），并不是画布
通过问题1可以解决该问题，即使<canvas>全屏
