本来想的挺复杂实际操作了一下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. com.sun.mirror的jar包

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sinat_36246371/article/details/53170166 <Java編程思 ...

  2. NET媒体文件操作组件TagLib

    开源的.NET媒体文件操作组件TagLib#解析   人生得意须尽欢 莫使金樽空对月.写博客都会在吃饭后,每次吃饭都要喝上二两小酒,写博客前都要闲扯,这些都是个人爱好,改不掉了,看不惯的人,还望多多包 ...

  3. vmware合并多个虚拟硬盘文件（使用vmware-vdiskmanager.exe）

    有时,当我们创建虚拟机vmware里面的应用程序,我们可能会选择创建分割的虚拟磁盘中的多个文件2GB的文件,这是为了提高复制过程,主要用于存储虚拟机文件系统不支持创建更大的文件.还有种情况是虚拟化物理 ...

  4. google地图API的简单使用

    <div id="contact_container" style="width:700px;height:600px;"></div> ...

  5. 它们的定义Activity跳转动画

    本来觉得是一个非常小的需求, 后来我发现总是 错误, 采用Theme于 4.0在 操作不是很容易使用. 后来查阅资料, 须要在finish 后面 和 startActivity 后面加入 overri ...

  6. 《得知opencv》注意事项——矩阵和图像处理——cvAdd、cvAddS and cvAddWeighted

    矩阵和图像操作 (1)cvAdd函数 其结构 void cvAdd(//图像加和 const CvArr* src1,//第一个原矩阵 const CvArr* src2,//第二个原矩阵 CvArr ...

  7. Jconsole使用实例解说

    Jconsole是jdk自带的一套java虚拟机执行状况监视器,它能够用来监控虚拟机的内存,线程,cpu使用情况以及相关的java进程相关的MBean,主界面例如以下: 图1 怎样连接被监控的Java ...

  8. c#调api串口通讯

    原文:c#调api串口通讯 在调试ICU通信设备的时候,由于串口通信老出现故障,所以就怀疑CF实现的SerialPort类是否有问题,所以最后决定用纯API函数实现串口读写. 先从网上搜索相关代码(关 ...

  9. Python缺乏调查的陷阱 动态实例属性、引用、逃生

    --看到哪里.想到哪里,记到哪里 非常多时候.非常多人学python的时候,会忽略的东西非常多.大多数都盯着能"出货"即可,可是通常在读别人的代码的时候发现,看不懂...一方面是自 ...

  10. Matlab随笔之插值与拟合（上）

    原文:Matlab随笔之插值与拟合(上) 1.拉格朗日插值 新建如下函数: function y=lagrange(x0,y0,x) %拉格朗日插值函数 %n 个节点数据以数组 x0, y0 输入(注 ...