canvas之终极画板

0. 前言

过年了啊，又是新的一年，首先祝大家新年快乐，网上有一个游戏叫什么？你画我猜，在上面你可以画点你想画的东西，可以改变画笔的颜色，如果一不小心你画错了，是不是得有一个橡皮擦，可以把你写错的擦掉，那用什么实现这个画板呢？canvas啊！！！

鸡年大吉、新年快乐.jpg

1. 简介

canvas本身没有绘图能力，只是定义了一个容器，都是由canvas内部的CanvasRenderingContext2D对象来做，需要我们用 JavaScript脚本 完成绘制工作。

2. 标签属性

标签	描述
height	设置 canvas 的高度。
width	设置 canvas 的宽度。
fill()	可以填充
fillRect(x,y,width,height)	绘制一个矩形边框
fillRect(x,y,width,height)	绘制一个填充的矩形
clearRect(x,y,width,height)	清除指定矩形区域，让清除部分完全透明
ctx.strokeStyle	可以改变画笔颜色
ctx.beginPath()	设置开始路径
ctx.moveTo(x,y)	设置起点
ctx.lineTo(x,y)	设置终点
ctx.stroke()	绘制
ctx.closePath()	结束路径
ctx.arc(弧形圆心x坐标，y坐标，半径，起始角(以3点钟的位置开始)，结束角、方向(true表示逆时针，false表示顺时针))	绘制一个弧形
ctx.quadraticCurveTo(cpx,cpy,x,y)参数是控制点x坐标，控制点y坐标，结束点x坐标，结束点y坐标	绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)参数是控制点1的x坐标，控制点1的y坐标，控制点2的x坐标，控制点2的y坐标，结束点x坐标，结束点y坐标	绘制三次贝塞尔曲线

3. 代码实现

3.1 静态页面

    
        
        
        
    
    
        

            

                

                    选择画笔颜色：
                    
                    
                    
                    
                    
                    
                
                

                    
                    当前选中的颜色是：黑色
                    
                
            
            
        
    

静态页面.png

3.2 画笔功能

画笔实现思路

1. 获取canvas
2. 设置初始化当前画布功能为画笔状态，以为我们后边要做橡皮擦功能，点击橡皮擦和颜色的时候要做一个区分。
3. 鼠标按下记录鼠标点击位置距离canvas画布的坐标并移动，记录上一个坐标点，然后移动鼠标开始画画
4. 鼠标抬起移除鼠标移动事件

画笔功能.gif

3.3 颜色选择

颜色实现思路

1. 点击颜色让画布的ctx.strokeStyle等于你点击的背景颜色
2. 创建颜色数据结构，根据颜色改变b标签的内容

            //获取改变颜色按钮
            var btns = document.querySelectorAll(".changeColor input");
            for (var i = 0; i < btns.length; i++) {
                btns[i].onclick = changeColor;
            }
            
            //颜色匹配数据结构
            var colorObj = {
                "#000000" : "黑色",
                "#ffc0cb" : "粉色",
                "#ff0000" : "红色",
                "#ffa500" : "橘色",
                "#a52a2a" : "棕色",
                "#800080" : "紫色"
            }
            
            //改变画笔颜色
            function changeColor() {
                ctx.strokeStyle = getComputedStyle(this,null).backgroundColor;
                var b = document.querySelector("b");
                b.style.color = ctx.strokeStyle;
                
                b.innerHTML = colorObj[ctx.strokeStyle];
                
                //改变画笔状态
                canvas.isDraw = true;
            }

画笔.gif

3.4 清空画布

清空画布思路

1. 获取元素节点
2. 点击按钮清空canvas画布

var clearAllBtn  = document.querySelector(".clear input");
            clearAllBtn.onclick = function () {
                ctx.clearRect(0,0,canvas.width,canvas.height);
            }

清空画布.gif

3.5 橡皮擦

橡皮擦思路

1. 获取元素节点，改变橡皮擦状态
2. 利用canvas剪裁的思路
   裁剪（在canvas中的裁剪和平时的裁剪功能不一样在这里，裁剪是指在裁剪区域去显示我们所画的图）

var clearBtn = document.querySelector(".clear input:last-of-type");
            
            clearBtn.onclick = function () {
                //改变状态为橡皮擦状态
                canvas.isDraw = false;
            }
            
            //橡皮擦功能
            function clearPart(x,y) {
                //保存场景
                ctx.save();
                ctx.beginPath();
                ctx.arc(x,y,10,0,Math.PI * 2,false);
                ctx.clip();
                ctx.clearRect(0,0,canvas.width,canvas.height);
                
                //还原场景
                ctx.restore();
            }

橡皮擦.gif

4. 完整代码

    
        
        
        
    
    
        

            

                

                    选择画笔颜色：
                    
                    
                    
                    
                    
                    
                
                

                    
                    当前选中的颜色是：黑色
                    
                
            
            
        
        
    

5. 结束语

哎，又涨了一岁，祝大家新年快乐啊，给大家拜个年，当然你们也得给个红包哈，点个赞，分个享啥的，最后希望大家在新的一年开心，快乐，工作顺利。