是 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可以解决该问题，即使 全屏