本来想的挺复杂实际操作了一下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 黑板的更多相关文章

  1. 《Note --- Unreal 4 --- behavior tree》

    Web: https://docs.unrealengine.com/latest/INT/Engine/AI/BehaviorTrees/index.html Test project: D:\En ...

  2. 使用Map List 封装json数据

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  3. 英语进阶系列-A03-英语升级练习一

    古诗背诵 要求:根据诗句,先翻译成现代文,然后绘制图像. 词汇系列 要求:认真朗读单词,然后通过该单词联想2个词汇,然后给每个单词造句. 例子:class班级,联想到了classroom教室,clas ...

  4. 笔记:Sublime Text 3

    http://www.sublimetext.com/3 Sublime Text官网 http://www.sublimetextcn.com/3/ Sublime Text中文官网 http:// ...

  5. 树莓派进阶之路 (018) - raspberryPi摄像头命令行软件raspistill帮助文档

    文档原文:https://www.raspberrypi.org/app/uploads/2013/07/RaspiCam-Documentation.pdf 作用 在指定的时间运行摄像头,而且如果需 ...

  6. 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 ...

  7. 《今天你买到票了吗?——从铁道部12306.cn站点漫谈电子商务站点的“海量事务快速处理”系统》

    <今天你买到票了吗?--从铁道部12306.cn站点漫谈电子商务站点的"海量事务快速处理"系统> 首发地址: http://bbs.hpx-party.org/thre ...

  8. [UE4]装饰器:Blackboard(装饰器的一种,不是黑板)

    装饰器Blackboard可以检查黑板的值是否满足期望的条件: 添加“Blackboard装饰器”:在组合或者任务节点上右键“添加装饰器...”,跟普通装饰器一样. Notify Observer:通 ...

  9. canvas常用属性方法由浅下沉

    首先引入<canvas></canvas>标签就不必说了. 其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') ) ...

随机推荐

  1. Smart internet of things services

    A method and apparatus enable Internet of Things (IoT) services based on a SMART IoT architecture by ...

  2. 【16.56%】【codeforces 687B】Remainders Game

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. Delphi绘图相关对象(TCanvas对象的方法)

    TCanvas对象的方法 方法 说明 Arc Arc(x1,y1,x2,y2,x3,y3,x4,y4 : Integer); Arc方法在椭圆上画一段弧,椭圆由(x1,y1).(x2,y2) 两点所确 ...

  4. spring-boot-starter-parent 1.3.6.RELEASE

    2016-11-17 23:43:17.979 DEBUG 3944 --- [ main] o.s.b.f.s.DefaultListableBeanFactory : Creating share ...

  5. 解决 ubuntu 14.04.1 下一个sublime text3 3065 中国输入的问题

    你看今天 sublime text3 我以前有没有3059 的  它有支持3065该. 因此,为了支持subl  对中国输入法的实现 ,下面的操作步骤把我的记录供大家使用 有一个完整的教程:  htt ...

  6. ElasticSearch的javaAPI之Client

    翻译的原文:http://www.elasticsearch.org/guide/en/elasticsearch/client/java-api/current/client.html#node-c ...

  7. Notice: Undefined index: user in D:\phpStudy\WWW\js\ls\lsmc\php\add.php on line 9

    原文:Notice: Undefined index: user in D:\phpStudy\WWW\js\ls\lsmc\php\add.php on line 9 (初用数据库(mysql)做用 ...

  8. [Hibernate系列—] 3. 映射文件和使用SchemaExport制作自己主动Schema

    自己定义映射文件 这里的映射文件指的是相应到数据库表的xml 的定义文件. 相应的每一个数据库表栏位, 能够定义的属性有: 属性名 类型 Description length number 栏位的长度 ...

  9. 安装Eclipse完PyDev插件中没有出现

    假设你是在Window7在环境搭建.请确保您使用以管理员身份运行Eclipse. PyDev插件安装后没有显示是由于PyDev的执行须要Java7,能够通过升级JDK的版本号来完毕,而且配置环境变量( ...

  10. Easyui Tab刷新

    Easyui Tab刷新: function refreshTab(title){ var tab = $('#id').tab('getTab',title); $('#id').tab('upda ...