【canvas】blackboard 黑板
本来想的挺复杂实际操作了一下15分钟完成了，挺简单的。
预览地址：http://dtdxrk.github.io/game/blackboard/index.html
分享一下思路：
1.创建画布
2.添加按钮
3.设置事件
没啥好说的就这样吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blackboard</title>
<style>
*{margin: 0;padding: 0;}
#wapper{margin:50px auto 0;display: block;}
#wapper:hover{cursor: pointer;}
.btn-list{width: 810px;margin: 5px auto;}
.btn{padding:5px 10px;margin-right: 10px;}
</style>
</head>
<body> <canvas id="wapper" width="800" height="400"></canvas>
<!-- btn -->
<div class="btn-list">chalkColor : <button class="btn" id="btn-white">white</button><button class="btn" id="btn-pink">pink</button><button class="btn" id="btn-green">green</button></div>
<div class="btn-list">lineWidth : <button class="btn" id="btn-5">5</button><button class="btn" id="btn-10">10</button><button class="btn" id="btn-15">15</button></div>
<div class="btn-list">clearAll : <button class="btn" id="btn-clearall">clearAll</button></div>
<!-- btn end-->
<script> var blackboard = {
color:'#fff',
lineWidth:5,
isDrawing:false,
x:0,
y:0,
init:function(){
this.wapper = document.getElementById('wapper');
this._2d = this.wapper.getContext('2d');
this.clear_blackboard();
this.init_font();
this.bind_btnEvent();
},
clear_blackboard:function(){
/*绘制背景颜色*/
this._2d.beginPath();
this._2d.fillStyle = '#000';/*设置颜色*/
this._2d.fillRect(0,0,800,600);/*fillRect(起点x，起点y，矩形长，矩形宽)*/
},
init_font:function(){
this._2d.beginPath();
this._2d.font='100px Arial';
this._2d.fillStyle = '#fff';
this._2d.textAlign = 'center';
this._2d.fillText('blackboard',400,200);/*strokeText(text,x,y,max width)*/
},
bind_btnEvent:function(){
var that = this; that.wapper.onmouseout = function(e){
that.isDrawing = false;
} that.wapper.onmousemove = function(e){
if(that.isDrawing){
that.drawing(e.offsetX, e.offsetY);
that.x = e.offsetX;
that.y = e.offsetY;
}
} that.wapper.onmouseup = function(e){
that.isDrawing = false;
return false;
} that.wapper.onmousedown = function(e){
that.x = e.offsetX;
that.y = e.offsetY;
that.isDrawing = true;
return false;
} /*btn-clearall*/
document.getElementById('btn-clearall').onclick = function(){
that.clear_blackboard();
} document.getElementById('btn-white').onclick = function(){
that.color = 'white';
} document.getElementById('btn-pink').onclick = function(){
that.color = 'pink';
} document.getElementById('btn-green').onclick = function(){
that.color = 'green';
} document.getElementById('btn-5').onclick = function(){
that.lineWidth = 5;
} document.getElementById('btn-10').onclick = function(){
that.lineWidth = 10;
} document.getElementById('btn-15').onclick = function(){
that.lineWidth = 15;
}
},
drawing:function(x,y){
this._2d.beginPath();/*创建新的路径*/
this._2d.lineWidth = this.lineWidth;/*设置线条宽度*/
this._2d.strokeStyle = this.color;/*设置线条颜色*/
this._2d.lineCap = 'round';/*向线条的每个末端添加圆形线帽。*/
this._2d.moveTo(this.x, this.y);/*将画笔光标移动到画布坐标10，10*/
this._2d.lineTo(x,y);/*画一条线*/
this._2d.stroke();/*绘制定义的路径*/
}
}
blackboard.init();
</script>
</body>
</html>
【canvas】blackboard 黑板的更多相关文章
- 《Note --- Unreal 4 --- behavior tree》
Web: https://docs.unrealengine.com/latest/INT/Engine/AI/BehaviorTrees/index.html Test project: D:\En ...
- 使用Map List 封装json数据
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...
- 英语进阶系列-A03-英语升级练习一
古诗背诵 要求:根据诗句,先翻译成现代文,然后绘制图像. 词汇系列 要求:认真朗读单词,然后通过该单词联想2个词汇,然后给每个单词造句. 例子:class班级,联想到了classroom教室,clas ...
- 笔记：Sublime Text 3
http://www.sublimetext.com/3 Sublime Text官网 http://www.sublimetextcn.com/3/ Sublime Text中文官网 http:// ...
- 树莓派进阶之路 (018) - raspberryPi摄像头命令行软件raspistill帮助文档
文档原文:https://www.raspberrypi.org/app/uploads/2013/07/RaspiCam-Documentation.pdf 作用 在指定的时间运行摄像头,而且如果需 ...
- English trip -- VC(情景课)2 A At school
xu言: Sometimes, I feel very confused. However, there will always be a weak light in a corner to ligh ...
- 《今天你买到票了吗？——从铁道部12306.cn站点漫谈电子商务站点的“海量事务快速处理”系统》
<今天你买到票了吗?--从铁道部12306.cn站点漫谈电子商务站点的"海量事务快速处理"系统> 首发地址: http://bbs.hpx-party.org/thre ...
- [UE4]装饰器：Blackboard（装饰器的一种，不是黑板）
装饰器Blackboard可以检查黑板的值是否满足期望的条件: 添加“Blackboard装饰器”:在组合或者任务节点上右键“添加装饰器...”,跟普通装饰器一样. Notify Observer:通 ...
- canvas常用属性方法由浅下沉
首先引入<canvas></canvas>标签就不必说了. 其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') ) ...
随机推荐
- Android四个基本组件（2）之Service 服务与Content Provider内容提供商
一.Service 维修: 一Service 这是一个长期的生命周期,没有真正的用户界面程序,它可以被用于开发如监视类别节目. 表中播放歌曲的媒体播放器.在一个媒体播放器的应用中.应该会有多个acti ...
- 【26.87%】【codeforces 712D】Memory and Scores
time limit per test2 seconds memory limit per test512 megabytes inputstandard input outputstandard o ...
- In partitioned databases, trading some consistency for availability can lead to dramatic improvements in scalability.
In partitioned databases, trading some consistency for availability can lead to dramatic improvement ...
- Swift语言高速入门
Swift语言高速入门(首部同步新版官方API文档和语法的Swift图书,确保代码可编译,作者专家在线答疑,图书勘误实时跟进) 极客学院 编著 ISBN 978-7-121-24328-8 201 ...
- WPF UserControl 的绑定事件、属性、附加属性
原文:WPF UserControl 的绑定事件.属性.附加属性 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Vblegend_2013/arti ...
- echarts 堆叠折线
option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','视频 ...
- 在vs中启动项目，同时给项目传递参数
问题的引出:项目在startup.cs文件中做了控制,根据读取的控制台的ip 和端口启动项目 : dotnet project --ip 127.0.0.1 --port 8001 这样写的好处是 ...
- HDU2665 Kth number 【合并树】
Kth number Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- 【剑指offer】直扑克
个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想測測自己的手气,看看能不能抽到顺子,假设抽到的话,他决定去买体育彩票,嘿嘿! ! "红心A,黑桃3,小王,大王,方 ...
- @RequestBody标记的形参，与APP接口不能直接用
用ajax请求传JSON串,在服务端形参用@RequestBody标记可以直接转为对应的对象: 在APP调用该接口时,服务端用@RequestBody标记无法转为对应对象,将形参改为String类型, ...