使用实现画板

源码
预览

<canvas>是 HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

思路：

1. 尝试在画布上先用鼠标画点，获取鼠标点击时的x，y坐标，添加给“点”
2. 将点连成线，即鼠标移动时打点（点成线原理）。这里我们需要的是鼠标按下，移动打点，松开停止（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>标签完成画板的制作。

1. 创建画线函数，将第一点（mousedown）与第二点（mousemove）连线，第三点（mousemove）连线，最后与（mouseup）连线。
2. 定义变量用来记录第一点坐标，第二点坐标并更新。

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” 操作符判断某某属性是否存在

遇到的问题与解决方法

1. <canvas> 画板宽高问题

//给画板全屏模式
var pageWidth=document.documentElement.clientWidth;
var pageHeight=document.documentElement.clientHeight;
canvas.width=pageWidth;
canvas.height=pageHeight;

注意：由于行内块级元素的特性，此时会出现滚动条，需要更改 <canvas> 的对其方式：vertical-align:top;

2. 移动端出现滚动条
   通过给 <canvas> 添加固定定位

3. 其中鼠标点击事件的 clientX/Y 是相对于整个文档（视口），并不是画布
   通过问题1可以解决该问题，即使 <canvas> 全屏