是 HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。
思路：
尝试在画布上先用鼠标画点，获取鼠标点击时的x，y坐标，添加给“点”
将点连成线，即鼠标移动时打点(点成线原理)。这里我们需要的是鼠标按下，移动打点，松开停止(3个事件，但是只需要一个状态，就是鼠标移动事件在鼠标点击事件后，且鼠标松开时停止)缺点：不能连续打点，移动过快时断点
document.οnmοusedοwn=function(){} //鼠标点击事件
document.οnmοusemοve=function(){} //鼠标移动事件
document.οnmοuseup=function(){} //鼠标松开事件
这时，就需要用到HTML5新标签
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控制初始宽高(等比例缩放)
除了可以直接画正方形外，还可以画是三角形：
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();//描边
此时，就可以使用标签完成画板的制作。
创建画线函数，将第一点(mousedown)与第二点(mousemove)连线，第三点(mousemove)连线，最后与(mouseup)连线。
定义变量用来记录第一点坐标，第二点坐标并更新。
canvas.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=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.οnclick=function(){
hua.clearRect(0,0,canvas.width,canvas.height);
};
/************************************************************************/
//点击保存
var saveObj=document.getElementById("save");
saveObj.οnclick=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” 操作符判断某某属性是否存在
遇到的问题与解决方法
画板宽高问题
//给画板全屏模式
var pageWidth=document.documentElement.clientWidth;
var pageHeight=document.documentElement.clientHeight;
canvas.width=pageWidth;
canvas.height=pageHeight;
注意：由于行内块级元素的特性，此时会出现滚动条，需要更改 的对其方式：vertical-align:top;
移动端出现滚动条
通过给 添加固定定位
其中鼠标点击事件的 clientX/Y 是相对于整个文档(视口)，并不是画布
通过问题1可以解决该问题，即使 全屏
