canvas之你画我猜

效果图：

知识点：(更多)

代码实现：

1.html结构

<div 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>
</div>

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) {//获取操作的idcase '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;

canvas之你画我猜相关推荐

socket + vue + canvas实践，你画我猜（一）
正式项目未开始,先先自己练手,做一个你画我猜小游戏,先上一个不完善的dome 在线地址 http://www.5rgame.com 1.node: 安装socket,启动服务 var io = req ...
webrtc+canvas+socket.io从零实现一个你画我猜 | 掘金技术征文
开场白最近键盘坏了,刚好看到掘金有声网的技术征文,想整个键盘.于是就开始从零开始学习webrtc, 一开始看文档就是个素质三连.这么难啊,这咋整啊,这谁顶的住啊.于是就开始全网找资料,很幸运的在掘金 ...
canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
基于HarmonyOS分布式小游戏之你画我猜
文章目录一.游戏逻辑二.数据管理 1.增加 2.删除 3.查询三.绘图模块 1. 自定义画笔 2.自定义颜色选择器 3.自定义画板三. 跨端通信四.游戏界面逻辑五.简单的Dialog 1. ...
【C#大作业】你画我猜——客户端代码实现
1.配置文件L:App.config <?xml version="1.0" encoding="utf-8" ?> <configurati ...
Vue2 + Nodejs + WebSocket 完成你画我猜多人在线游戏
使用 websocket + vue2 即可完成一个很有意思的在线游戏作品. 你画我猜,相信大家对这个游戏都很熟悉. 我用Vue2 + mint-ui + nodejs + websocket 实现了 ...
使用websocket实现“你画我猜”
1,环境配置(nodejs) 文件结构: package.json: {"name": "websocket","version": &qu ...
【微信小程序】你画我猜Merged
你画我猜代码在github: https://github.com/ETRick/MiniProgram-Draw 设计知识点比较全面,可做微信小程序教程: - canvas绘制 - 自定义组件 - ...
实训项目“你画我猜”总结_前端篇
为期4周的实训就要结束了,感谢团队中的每一名同学,才有了我们今天的成果.我们这个5人小团队(产品一位,测试一位,开发三位(两名后台,一名前端)),来自不同的学校,带着刚毕业的学生气一起组成了我们的&q ...

canvas之你画我猜

效果图：

知识点：(更多)

代码实现：

1.html结构

2.css样式

3.canvas获取上下文对象

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

5.点击btn事件

canvas之你画我猜相关推荐

最新文章

热门文章