「你猜我画」canvas之你画我猜

你猜我画

效果图：

在这里插入图片描述

知识点：(更多)

Canvas.getcontext(‘2d’) // 3d webGL
ctx.moveTo(x,y)
ctx.lineTo(x,y) // 从当前的点绘制到x,y
ctx.stroke() // 描边
ctx.fill() // 填充
ctx.strokeStyle() // 设置或返回用于笔触的颜色、渐变或模式
ctx.closePath() // 结束绘制子路径的集合
ctx.beginPath() // 重新绘制子路径的集合
ctx.clearRect(x,y,width,height) // 清除画布方形区域
ctx.getImageData() // 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
ctx.putImageData() // 把图像数据（从指定的 ImageData 对象）放回画布上

代码实现：

1.html结构

<p class="wrAPPer">
    <canvas class=cavs width="1000" height="400"></canvas>
    <ul class="btn-list">
        <li><input type="color" id="colorBoard" value="colorboard"></li>
        <li><input type="button" id="cleanBoard" value="清屏"></li>
        <li><input type="button" id="eraser" value="橡皮"></li>
        <li><input type="button" id="rescind" value="撤消"></li>
        <li><input type="range" id="lineRuler" value="线条" min='1' max='30'></li>
    </ul>
</p>

input元素的type类型

传统类型

text 　　　定义单行的输入字段，用户可在其中输入文本
password 定义密码字段。该字段中的字符被掩码
file 　　　定义输入字段和 "浏览"按钮，供文件上传
radio　　定义单选按钮
checkbox 定义复选框
hidden 　定义隐藏的输入字段
button 　　定义可点击按钮（多数情况下，用于通过javaScript启动脚本）
image 　　定义图像形式的提交按钮
reset 　　定义重置按钮。重置按钮会清除表单中的所有数据
submit 　定义提交按钮。提交按钮会把表单数据发送到服务器

新增类型

color 　　　　　　定义调色板
tel 　　　　　　定义包含电话号码的输入域
email 　　　　　定义包含email地址的输入域
url 　　　　　　定义包含url地址的输入域
search 　　　　　定义搜索域
number 　　　　定义包含数值的输入域
range 　　　　定义包含一定范围内数字值的输入域
date 　　　　　　定义选取日、月、年的输入域
month 　　　　定义选取月、年的输入域
week 　　　　　　定义选取周、年的输入域
time 　　　　定义选取月、年的输入域
datetime 　　　定义选取时间、日月、年的输入域(UTC时间)

2.css样式

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    background: url('img/xhr.jpg') no-repeat;
    background-size: cover;
}
.wrapper{
    margin-left: 15px;
}
.wrapper canvas{
    border: 1px solid royalblue;
    border-radius: 25px;
    box-shadow: 10px 10px 5px #888888;
    margin-bottom: 20px;
}
.wrapper .btn-list{
    width: 1000px;
    text-align: center;
}
.wrapper .btn-list li{
    display: inline-block;
    margin-left: 40px;
}
.wrapper .btn-list li input{
    background: yellow;
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 25px;
    font-size: 20px;
    display: block;
    transition-duration:0.2s; 
}
.wrapper .btn-list li input:hover{
    border: 1px solid rebeccapurple;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.3);
}

3.canvas获取上下文对象

为了避免全局变量的污染，尽可能创建一个全局变量。让其他对象和函数存在其中。

var drawingLineObj = {
    cavs: $('.cavs'),
    context: $('.cavs').get(0).getContext('2d'),
    colorBoard: $('#colorBoard'),
    lineRuler: $('#lineRuler'),
    bool: false,//锁
    init: function () {
        this.context.lineCap = 'round';//线条起始和结束是样式
        this.context.lineJoin = 'round';//转弯
        this.draw();
        this.btnFun();//点击按钮事件
    }
}

4.鼠标事件及获取鼠标在画板上的坐标

draw: function () {
        var cavs = this.cavs,
            self = this;
        // 获取canvas内鼠标坐标记得减去canvas边距
        var c_x = cavs.offset().left,
            c_y = cavs.offset().top;
        //画笔放下
        cavs.mousedown(function (e) {
            e = e || window.event;
            self.bool = true;
            var m_x = e.pageX - c_x,
                m_y = e.pageY - c_y;
            self.context.beginPath();
            self.context.moveTo(m_x, m_y);
            //画笔移动
            cavs.mousemove(function (e) {
                if (self.bool) {
                    self.context.lineTo(e.pageX - c_x, e.pageY - c_y);
                    self.context.stroke();
                }
            });
            //画笔抬起
            cavs.mouseup(function (e) {
                self.context.closePath();
                self.bool = false;
            });
            //画笔离开
            cavs.mouseleave(function (e) {
                self.context.closePath();
                self.bool = false;
            });
        })
    },

5.点击btn事件

btnFun: function () {
    var self = this;
    $('.btn-list').on('click', function (e) {
        e = e || window.event;
        switch (e.target.id) {//获取操作的id
            case 'cleanBoard'://清屏
               ...
            case 'eraser'://橡皮擦
                ...
            case 'rescind'://撤消
                ...
        }
    });
 }

橡皮擦

case 'eraser'://橡皮擦
    self.context.strokeStyle = '#fff';
    break;

清屏操作

case 'cleanBoard'://清屏
    self.context.clearRect(0, 0, self.cavs[0].width, self.cavs[0].height);
    break;

改变画笔颜色

this.colorBoard.change(function (e) {//改变画笔颜色
    self.context.strokeStyle = $(this).val();
});

改变画笔粗细

this.lineRuler.change(function (e) {//改变笔触
    self.context.lineWidth = $(this).val();
});

撤销操作

在draw方法中将每一笔存储下来

//储存每一笔，撤消时将最后一笔移除数组
var imgData = self.context.getImageData(0, 0, self.cavs[0].width, self.cavs[0].height);
self.arrImg.push(imgData);

btnFun方法点击撤销将数组最后一个元素pop

case 'rescind'://撤消
    if (self.arrImg.length > 0) {//小于0会报错
        self.context.putImageData(self.arrImg.pop(), 0, 0);
    }
    break;

文章最后发布于: 2019-05-18 15:40:24

canvas之你画我猜

你猜我画

效果图：

知识点：(更多)

代码实现：

1.html结构

2.css样式

3.canvas获取上下文对象

4.鼠标事件及获取鼠标在画板上的坐标

5.点击btn事件

相关阅读

栏目导航

推荐阅读

热门阅读