【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 黑板相关推荐

html5黑板源码,支持移动端的HTML5 Canvas逼真黑板特效
简要教程这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动端,它能模拟使用粉笔在黑板上写字的效果.该黑板特效的特点还有:使用鼠标左键能够在黑板上写字. 使用鼠标右键能够擦除已 ...
html5 canvas 图片移动端,支持移动端的HTML5 Canvas逼真黑板特效
插件描述:这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动端,它能模拟使用粉笔在黑板上写字的效果. 这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动 ...
ue4蓝图和ai的区别_UE4 AI基础
本文只是介绍AI使用到的基础组件的作用的理论介绍,对你马上能上手操作制作一个AI用处不大.请读者注意, AIPawn/AICharacter/AI角色AI角色,就是AI的角色蓝图与玩家操控的角色一样 ...
虚幻C++入门个人笔记(3)——接口、智能指针、动画蓝图、行为树、EQS系统
接口接口的词义广泛,用来陈述功能.选项,与其他程序结构进行沟通的方式.接口抽象出了交互结构,提供了两个未知逻辑交互的便捷性.对于编程中,如何更好地设计低耦合程序起到了至关重要的作用.设计者可以在互不 ...
英语--日常生活名词收集 Daily Life Nouns Collection
1.教室 classroom 1.public-address speaker 广播 2.map 地图 3.chalkboard/blackboard 黑板 4.class schedule 课表 5 ...
multimedia教学设计计算机英语,高中英语教学设计案例
Book7 Unit5 Travelling Abroad Ⅰ. Teaching contents 教学内容 Unit5 Travelling Abroad ( NEFC Book7 ) Usi ...
树莓派开发笔记(九)：基于CSI口的摄像头拍照程序(同样适用USB摄像头)
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/ ...
英语单词词性顺口溜_巧记英语单词的顺口溜这样记忆不枯燥
英语要怎么记才快呢?学习英语背单词最让人头疼了,有什么办法可以巧记?今天小编整理了关于记忆英语单词的方法,这些内容供大家参考,下面我们一起来了解一下吧. 巧记英语单词的顺口溜越是生动的对象越能够更好 ...
Unity Shader Graph 制作Grid网格效果
效果图: 用到的关键节点:Rectangle矩形节点.Fraction 关于Rectangle矩形节点的官方文档介绍: 大概含义指根据输入的UV生成一个矩形形状,大小由输入的宽度和高度指定,生成的形状 ...
HTC Android系统自定义ROM定制图文教程
小弟写得差请勿拍砖,如果有意见请直接回复本贴!谢谢! 技术有限,部分可能不详细或者错误的请各位指出,大家交流! 前言: 一个完整的ROM根目录会有以下几个文件夹及文件: data META-IN s ...

【canvas】blackboard 黑板

【canvas】blackboard 黑板相关推荐

最新文章

热门文章