【canvas】blackboard 黑板

最新推荐文章于 2025-01-06 20:18:22 发布

weixin_30248399

最新推荐文章于 2025-01-06 20:18:22 发布

阅读量142

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dtdxrk/p/4442967.html

本文介绍了一个简单的在线黑板绘制应用实现过程。该应用使用HTML5 Canvas和JavaScript完成，包括颜色选择、线条粗细调整及清屏功能。作者在15分钟内完成了整个项目的开发。

本来想的挺复杂实际操作了一下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>

转载于:https://www.cnblogs.com/dtdxrk/p/4442967.html