手把手教你实现一个canvas智绘画板

时间  2019-11-07
标签 手把手 实现 一个 canvas 绘画 繁體版
原文   原文链接

前言

本文主要介绍：css

  1. 项目介绍
  2. 项目效果展现
  3. 一步步实现项目效果
  4. 踩坑

1、项目介绍

名称： 智绘画板html

技术栈： HTML5，CSS3，JavaScript，移动端git

功能描述：github

  • 支持PC端和移动端在线绘画功能
  • 实现任意选择画笔颜色、调整画笔粗细以及橡皮檫擦除等绘画功能
  • 实如今线画板的本地保存功能
  • 支持撤销和返回操做
  • 自定义背景颜色[这个功能还没有完善好] 注：本项目仅仅是canvas和JavaScript练手小项目，存在一个问题还没有解决，橡皮擦把背景层都给擦掉了，但愿有大神给一些建议给我，谢谢！

2、项目效果展现

项目地址 预览地址编程

预览图

PC端的预览图：canvas

移动端的预览图：数组

看完上面的预览图和体验过智绘画板以为还能够的，记得点个赞哦，无论你是否十分激动，反正我是挺激动的，毕竟本身实现出现的项目效果，挺自豪的，说了一堆废话，下面就能够动起手来敲代码，实现本身想要的效果！！！浏览器

注：下面实现项目效果主要是关于JavaScript方面的，下面仅仅是提供实现思路的代码，并不是所有代码。app

3、一步步实现项目效果

（一）分析页面

经过用例图，咱们知道用户进入咱们这个网站有哪些功能？函数

用户能够进行的操做：

  • 画画
  • 改变画笔的粗细
  • 切换画笔的颜色
  • 使用橡皮檫擦除不想要的部分
  • 清空画板
  • 将本身画的东西保存成图片
  • 进行撤销和重作操做
  • 切换画板背景颜色
  • 兼容移动端（支持触摸）

（二）进行HTML布局

我书写html的同时，引入了css文件和js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>智绘画板</title>
    <link rel="shortcut icon" href="./image/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <canvas id="canvas"></canvas>
    <!-- 自定义背景颜色功能还没有完善好 -->
    <!--<div class="bg-btn"></div> <div class="color-group" id="bgGroup"> <h3>选择背景颜色:</h3> <ul class="clearfix"> <li class="bgcolor-item" style="background-color: blue;"></li> <li class="bgcolor-item" style="background-color: black;"></li> <li class="bgcolor-item" style="background-color: #FF3333;"></li> <li class="bgcolor-item" style="background-color: #0066FF;"></li> <li class="bgcolor-item" style="background-color: #FFFF33;"></li> <li class="bgcolor-item" style="background-color: #33CC66;"></li> <li class="bgcolor-item" style="background-color: gray;"></li> <li class="bgcolor-item" style="background-color: #F34334;"></li> <li class="bgcolor-item" style="background-color: #fff;box-shadow: 0 1px 2px 0 rgba(32,33,36,0.28);"></li> <li class="bgcolor-item" style="background-color: #9B27AC;"></li> <li class="bgcolor-item" style="background-color: #4CB050;"></li> <li class="bgcolor-item" style="background-color: #029688;"></li> </ul> <i class="closeBtn"></i> </div>-->
    <div class="tools">
        <div class="container">
            <button class="save" id="save" title="保存"></button>
            <button class="brush active" id="brush" title="画笔"></button>
            <button class="eraser" id="eraser" title="橡皮擦"></button>
            <button class="clear" id="clear" title="清屏"></button>
            <button class="undo" id="undo" title="撤销"></button>
            <button class="redo" id="redo" title="再作"></button>
        </div>
    </div>
    <div class="pen-detail" id="penDetail">
        <i class="closeBtn"></i>
        <p>笔大小</p>
        <span class="circle-box"><i id="thickness"></i></span> <input type="range" id="range1" min="1" max="10" value="1">
        <p>笔颜色</p>
        <ul class="pen-color clearfix">
            <li class="color-item active" style="background-color: black;"></li>
            <li class="color-item" style="background-color: #FF3333;"></li>
            <li class="color-item" style="background-color: #99CC00;"></li>
            <li class="color-item" style="background-color: #0066FF;"></li>
            <li class="color-item" style="background-color: #FFFF33;"></li>
            <li class="color-item" style="background-color: #33CC66;"></li>
        </ul>
        <p>不透明度</p>
        <i class="showOpacity"></i> <input type="range" id="range2" min="1" max="10" value="1">
    </div>
    <script src="./js/main.js"></script>
</body>
</html>
复制代码

（三）用CSS美化界面

css代码能够根据我的习惯进行美化界面，因此这里就不写css的代码了，你们能够直接看项目代码或者从开发者工具中审查元素观看。若是有问题能够私聊我，我以为问题不大。

（四）使用JS实现项目的具体功能

1.准备工做

首先，准备个容器,也就是画板了，前面的html已经书写好这个容器，这里纯属是废话。

<canvas id="canvas"></canvas>
复制代码

而后初始化js

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
复制代码

我打算把画板作成全屏的，因此接下来设置一下canvas的宽高

let pageWidth = document.documentElement.clientWidth;
let pageHeight = document.documentElement.clientHeight;

canvas.width = pageWidth;
canvas.height = pageHeight;
复制代码

因为部分IE不支持canvas，若是要兼容IE，咱们能够建立一个canvas，而后使用excanvas初始化，针对IE加上exCanvas.js，这里咱们明确不考虑IE。

可是我在电脑上对浏览器的窗口进行改变，画板不会自适应的放缩。解决办法：

// 记得要执行autoSetSize这个函数哦
function autoSetSize(){
    canvasSetSize();
    // 当执行这个函数的时候，会先设置canvas的宽高
    function canvasSetSize(){
        // 把变化以前的画布内容copy一份，而后从新画到画布上
        let imgData = context.getImageData(0,0,canvas.width,canvas.height);
        let pageWidth = document.documentElement.clientWidth;
        let pageHeight = document.documentElement.clientHeight;
        
        canvas.width = pageWidth;
        canvas.height = pageHeight;
        context.putImageData(imgData,0,0);
    }
    // 在窗口大小改变以后,就会触发resize事件，从新设置canvas的宽高
    window.onresize = function(){
        canvasSetSize();
    }
}
复制代码

2.实现画画的功能

实现思路：监听鼠标事件， 用drawLine()方法把记录的数据画出来。

  1. 初始化当前画板的画笔状态，painting = false。
  2. 当鼠标按下时（mousedown），把painting设为true，表示正在画，鼠标没松开。把鼠标点记录下来。
  3. 当按下鼠标的时候，鼠标移动（mousemove）就把点记录下来并画出来。
  4. 若是鼠标移动过快，浏览器跟不上绘画速度，点与点之间会出现间隙，因此咱们须要将画出的点用线连起来（lineTo()）。
  5. 鼠标松开的时候（mouseup），把painting设为false。

注：drawCircle这个方法其实能够不用书写，这个只是为了让你们可以理解开始点击的位置在哪里？

function listenToUser() {
    // 定义一个变量初始化画笔状态
    let painting = false;
    // 记录画笔最后一次的位置
    let lastPoint = {x: undefined, y: undefined};

    // 鼠标按下事件
    canvas.onmousedown = function(e){
        painting = true;
        let x = e.clientX;
        let y = e.clientY;
        lastPoint = {'x':x,'y':y};
        drawCircle(x,y,5);
    }

    // 鼠标移动事件
    canvas.onmousemove = function(e){
        if(painting){
            let x = e.clientX;
            let y = e.clientY;
            let newPoint = {'x':x,'y':y};
            drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
            lastPoint = newPoint;
        }
    }

    // 鼠标松开事件
    canvas.onmouseup = function(){
        painting = false;
    }
}

// 画点函数
function drawCircle(x,y,radius){
    // 新建一条路径，生成以后，图形绘制命令被指向到路径上生成路径。
    context.beginPath();
    // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），
    // 从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
    context.arc(x,y,radius,0,Math.PI*2);
    // 经过填充路径的内容区域生成实心的图形
    context.fill();
    // 闭合路径以后图形绘制命令又从新指向到上下文中。
    context.closePath();
}

function drawLine(x1,y1,x2,y2){
    // 设置线条宽度
    context.lineWidth = 10;
    // 设置线条末端样式。
    context.lineCap = "round";
    // 设定线条与线条间接合处的样式
    context.lineJoin = "round";
    // moveTo(x,y)将笔触移动到指定的坐标x以及y上
    context.moveTo(x1,y1);
    // lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线
    context.lineTo(x2,y2);
    // 经过线条来绘制图形轮廓
    context.stroke();
    context.closePath();
}
复制代码

3.实现橡皮擦功能

实现思路：

  1. 获取橡皮擦元素
  2. 设置橡皮擦初始状态，eraserEnabled = false。
  3. 监听橡皮擦click事件，点击橡皮擦，改变橡皮擦状态，eraserEnabled = true，而且切换class，实现被激活的效果。
  4. eraserEnabled为true，移动鼠标用context.clearRect()实现了橡皮檫。

可是我发现canvas的API中，能够清除像素的就是clearRect方法，可是clearRect方法的清除区域矩形，毕竟大部分人的习惯中的橡皮擦都是圆形的，因此就引入了剪辑区域这个强大的功能，也就是clip方法。下面的代码是使用context.clearRect()实现了 橡皮檫。请看踩坑部分，了解如何更好的实现橡皮檫。

let eraser = document.getElementById("eraser");
let eraserEnabled = false;

// 记得要执行listenToUser这个函数哦
function listenToUser() {
   	// ... 表明省略了以前写的代码
    // ...

    // 鼠标按下事件
    canvas.onmousedown = function(e){
        // ...
        if(eraserEnabled){//要使用eraser
            context.clearRect(x-5,y-5,10,10)
        }else{
            lastPoint = {'x':x,'y':y}
        }
    }

    // 鼠标移动事件
    canvas.onmousemove = function(e){
        let x = e.clientX;
        let y = e.clientY;
        if(!painting){return}
        if(eraserEnabled){
            context.clearRect(x-5,y-5,10,10);
        }else{
            var newPoint = {'x':x,'y':y};
            drawLine(lastPoint.x, lastPoint.y,newPoint.x, newPoint.y);
            lastPoint = newPoint;
        }  
    }

    // ...
}


// 点击橡皮檫
eraser.onclick = function(){
    eraserEnabled = true;
    eraser.classList.add('active');
    brush.classList.remove('active');
}
复制代码

4.实现清屏功能

实现思路：

  1. 获取元素节点。
  2. 点击清空按钮清空canvas画布。
let reSetCanvas = document.getElementById("clear");

// 实现清屏
reSetCanvas.onclick = function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    setCanvasBg('white');
}

// 从新设置canvas背景颜色
function setCanvasBg(color) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
复制代码

5.实现保存成图片功能

实现思路：

  1. 获取canvas.toDateURL
  2. 在页面里建立并插入一个a标签
  3. a标签href等于canvas.toDateURL，并添加download属性
  4. 点击保存按钮，a标签触发click事件
let save = document.getElementById("save");

// 下载图片
save.onclick = function(){
    let imgUrl = canvas.toDataURL('image/png');
    let saveA = document.createElement('a');
    document.body.appendChild(saveA);
    saveA.href = imgUrl;
    saveA.download = 'mypic'+(new Date).getTime();
    saveA.target = '_blank';
    saveA.click();
}
复制代码

6.实现改变背景颜色的功能

实现思路：

  1. 获取相应的元素节点。
  2. 给每个class为bgcolor-item的标签添加点击事件，当点击事件触发时，改变背景颜色。
  3. 点击设置背景颜色的div以外的地方，实现隐藏那个div。
let selectBg = document.querySelector('.bg-btn');
let bgGroup = document.querySelector('.color-group');
let bgcolorBtn = document.querySelectorAll('.bgcolor-item');
let penDetail = document.getElementById("penDetail");
let activeBgColor = '#fff';


// 实现了切换背景颜色
for (let i = 0; i < bgcolorBtn.length; i++) {
    bgcolorBtn[i].onclick = function (e) {
        // 阻止冒泡
        e.stopPropagation();
        for (let i = 0; i < bgcolorBtn.length; i++) {
            bgcolorBtn[i].classList.remove("active");
            this.classList.add("active");
            activeBgColor = this.style.backgroundColor;
            setCanvasBg(activeBgColor);
        }
    }
}

document.onclick = function(){
    bgGroup.classList.remove('active');
}

selectBg.onclick = function(e){
    bgGroup.classList.add('active');
    e.stopPropagation();
}
复制代码

7.实现改变画笔粗细的功能

实现思路：

  1. 实现让设置画笔的属性的对话框出现。
  2. 获取相应的元素节点。
  3. 当input=range的元素发生改变的时候，获取到的值赋值给lWidth。
  4. 而后设置context.lineWidth = lWidth。
let range1 = document.getElementById('range1');
let lWidth = 2;
let ifPop = false;

range1.onchange = function(){
    console.log(range1.value);
    console.log(typeof range1.value)
    thickness.style.transform = 'scale('+ (parseInt(range1.value)) +')';
    console.log(thickness.style.transform )
    lWidth = parseInt(range1.value*2);
}


// 画线函数
function drawLine(x1,y1,x2,y2){
    // ...
    context.lineWidth = lWidth;
    // ...
}

// 点击画笔
brush.onclick = function(){
    eraserEnabled = false;
    brush.classList.add('active');
    eraser.classList.remove('active');
    if(!ifPop){
        // 弹出框
        console.log('弹一弹')
        penDetail.classList.add('active');
    }else{
        penDetail.classList.remove('active');
    }
    ifPop = !ifPop;
}
复制代码

8.实现改变画笔颜色的功能

实现思路跟改变画板背景颜色的思路相似。

let aColorBtn = document.getElementsByClassName("color-item");

getColor();

function getColor(){
    for (let i = 0; i < aColorBtn.length; i++) {
        aColorBtn[i].onclick = function () {
            for (let i = 0; i < aColorBtn.length; i++) {
                aColorBtn[i].classList.remove("active");
                this.classList.add("active");
                activeColor = this.style.backgroundColor;
                ctx.fillStyle = activeColor;
                ctx.strokeStyle = activeColor;
            }
        }
    }
}
复制代码

9.实现改变撤销和重作的功能

实现思路：

  1. 保存快照：每完成一次绘制操做则保存一份 canvas 快照到 canvasHistory 数组（生成快照使用 canvas 的 toDataURL() 方法，生成的是 base64 的图片）；
  2. 撤销和反撤销：把 canvasHistory 数组中对应索引的快照使用 canvas 的 drawImage() 方法重绘一遍；
  3. 绘制新图像：执行新的绘制操做时，删除当前位置以后的数组记录，而后添加新的快照。
let undo = document.getElementById("undo");
let redo = document.getElementById("redo");

// ...
canvas.ontouchend = function () {
        painting = false;
        canvasDraw();
}

// ...
canvas.onmouseup = function(){
        painting = false;
        canvasDraw();
}

let canvasHistory = [];
let step = -1;

// 绘制方法
function canvasDraw(){
    step++;
    if(step < canvasHistory.length){
        canvasHistory.length = step;  // 截断数组
    }
    // 添加新的绘制到历史记录
    canvasHistory.push(canvas.toDataURL());
}

// 撤销方法
function canvasUndo(){
    if(step > 0){
        step--;
        // ctx.clearRect(0,0,canvas.width,canvas.height);
        let canvasPic = new Image();
        canvasPic.src = canvasHistory[step];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
        undo.classList.add('active');
    }else{
        undo.classList.remove('active');
        alert('不能再继续撤销了');
    }
}
// 重作方法
function canvasRedo(){
    if(step < canvasHistory.length - 1){
        step++;
        let canvasPic = new Image();
        canvasPic.src = canvasHistory[step];
        canvasPic.onload = function () { 
            // ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.drawImage(canvasPic, 0, 0);
        }
        redo.classList.add('active');
    }else {
        redo.classList.remove('active')
        alert('已是最新的记录了');
    }
}
undo.onclick = function(){
    canvasUndo();
}
redo.onclick = function(){
    canvasRedo();
}
复制代码

10.兼容移动端

实现思路：

  1. 判断设备是否支持触摸
  2. true，则使用touch事件；false，则使用mouse事件
// ...
if (document.body.ontouchstart !== undefined) {
    // 使用touch事件
    anvas.ontouchstart = function (e) {
        // 开始触摸
    }
    canvas.ontouchmove = function (e) {
        // 开始滑动
    }
    canvas.ontouchend = function () {
        // 滑动结束
    }
}else{
    // 使用mouse事件
    // ...
}
// ...
复制代码

4、踩坑

问题1：在电脑上对浏览器的窗口进行改变，画板不会自适应

解决办法：

onresize响应事件处理中，获取到的页面尺寸参数是变动后的参数 。

当窗口大小发生改变以后，从新设置canvas的宽高，简单来讲，就是窗口改变以后，给canvas.width和canvas.height从新赋值。

// 记得要执行autoSetSize这个函数哦
function autoSetSize(){
    canvasSetSize();
    // 当执行这个函数的时候，会先设置canvas的宽高
    function canvasSetSize(){
        let pageWidth = document.documentElement.clientWidth;
        let pageHeight = document.documentElement.clientHeight;
        
        canvas.width = pageWidth;
        canvas.height = pageHeight;
    }
    // 在窗口大小改变以后,就会触发resize事件，从新设置canvas的宽高
    window.onresize = function(){
        canvasSetSize();
    }
}
复制代码

问题2：当绘制线条宽度比较小的时候还好,一旦比较粗就会出现问题

解决办法：看一下文档，得出方法，只须要简单修改一下绘制线条的代码就行

// 画线函数
function drawLine(x1,y1,x2,y2){
    context.beginPath();
    context.lineWidth = lWidth;
    //-----加入-----
    // 设置线条末端样式。
    context.lineCap = "round";
    // 设定线条与线条间接合处的样式
    context.lineJoin = "round";
    //-----加入-----
    context.moveTo(x1,y1);
    context.lineTo(x2,y2);
    context.stroke();
    context.closePath();
}
复制代码

问题3：如何实现圆形的橡皮檫？

解决办法：

canvas的API中，能够清除像素的就是clearRect方法，可是clearRect方法的清除区域矩形，毕竟大部分人的习惯中的橡皮擦都是圆形的，因此就引入了剪辑区域这个强大的功能，也就是clip方法。用法很简单： 

ctx.save()
ctx.beginPath()
ctx.arc(x2,y2,a,0,2*Math.PI);
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();
复制代码

上面那段代码就实现了圆形区域的擦除，也就是先实现一个圆形路径，而后把这个路径做为剪辑区域，再清除像素就好了。有个注意点就是须要先保存绘图环境，清除完像素后要重置绘图环境，若是不重置的话之后的绘图都是会被限制在那个剪辑区域中。

问题4：如何兼容移动端？

1.添加meta标签

由于浏览器初始会将页面如今手机端显示时进行缩放，所以咱们能够在meta标签中设置meta viewport属性，告诉浏览器不将页面进行缩放，页面宽度=用户设备屏幕宽度

<meta name="viewport" content="width=device-width,
initial-scale=1,user-scalable=no,
maximum-scale=1.0,minimum-scale=1.0"/>

/*
页面宽度=移动宽度 ：width=device-width
用户不能够缩放：user-scalable=no
缩放比例：initial-scale=1
最大缩放比例：maximum-scale=1.0
最小缩放比例：minimum-scale=1.0
*/
复制代码

2.在移动端几乎使用的都是touch事件，与PC端不一样

因为移动端是触摸事件，因此要用到H5的属性touchstart/touchmove/touchend,可是PC端只支持鼠标事件，因此要进行特性检测。

在touch事件里，是经过.touches[0].clientX和.touches[0].clientY来获取坐标的，这点要和mouse事件区别开。

问题5：当浏览器大小变化时，画布被清空

解决办法1：http://js.jirengu.com/dafic/2/edit

解决办法2：http://js.jirengu.com/worus/2/edit

参考连接：canvas长宽变化时，画布内容消失

问题6：当橡皮擦移动很快时会变成圆点

参考连接： HTML5 实现橡皮擦的擦除效果

问题7：橡皮擦把背景层都给擦掉了，橡皮擦须要优化

嗯嗯，这个问题还没有解决，因此我就先把自定义背景颜色的功能取消掉，可是并无用，仍是存在橡皮檫会把背景层给擦掉，但愿有大神看到这篇文章，给一点建议和方法，谢谢！

问题8：出现一个问题就是清空以后，从新画，而后出现原来的画的东西

这个嘛，问题不大，只不过是我漏写context.beginPath(); ，也花了一点时间在上面解决bug，让我想起“代码千万行,注释第一行;编程不规范,同事两行泪 ”，仍是按照文档操做规范操做好，真香！！！

本文做者 xyyojl

本文若有错误之处，请留言，我会及时更正

或者提bug、提需求也是能够的

以为对您有帮助的话就点个赞或收藏吧！

欢迎转载或分享，转载时请注明出处

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程