涂鸦板简单实现 Html5编写属于自己的画画板


Posted in HTML / CSS onJuly 05, 2016

最近了解到html5强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能有:画画,改色,调整画笔大小

html5的绘图可以分为点,线,面,圆,图片等,点和线,这可是所有平面效果的基点,有了这两个东西,没有画不出来的东西,只有想不到的算法。

先上代码了:

html
XML/HTML Code复制内容到剪贴板
  1. <body style="cursor:pointer">  
  2.  <canvas id="mycavas" width="1024" height="400" style="border:solid 4px #000000"></canvas><!--画布-->  
  3.         <input type="color" id="color1" name="color1"/><!--设色器-->  
  4.         <output name="a" for="color1" onforminput="innerHTML=color1.value"></output>  
  5.          <input type="range" name="points" id="size" min="5" max="20" /><!--拖动条-->  
  6. </body>     

效果:

涂鸦板简单实现 Html5编写属于自己的画画板

好了,一个简陋的画图界面就搞好啦,下面开始写一些画线的代码 

JavaScript Code复制内容到剪贴板
  1. $.Draw = {};   
  2. $.extend($.Draw, {   
  3.     D2: "",   
  4.     CX:"",   
  5.     Box: "mycavas",//画布id   
  6.     BoxObj:function(){//画布对象   
  7.         this.CX=document.getElementById(this.Box);   
  8.     },   
  9.     D2:function(){//2d绘图对象   
  10.        this.D2 = this.CX.getContext("2d");   
  11.     },   
  12.     Cricle: function (x, y, r, color) {//画圆   
  13.         if (this.D2) {   
  14.             this.D2.beginPath();   
  15.             this.D2.arc(x, y, r, 0, Math.PI * 2, true);   
  16.             this.D2.closePath();   
  17.             if (color) {   
  18.                 this.D2.fillStyle = color;   
  19.             }   
  20.             this.D2.fill();   
  21.         }   
  22.     },   
  23.     init: function () {//初始化   
  24.         this.BoxObj();   
  25.         this.D2();   
  26.     }   
  27.   
  28. })   
  29.   

相信这里的简单代码大家都看得懂,主要就是创建了一个对象,包含创建画布,创建2d对象,画圆方法,和对象初始化方法。

接下里前台html页面来调用这个对象/p>

看代码:

JavaScript Code复制内容到剪贴板
  1. var color = "#000000";//初始化颜色   
  2.         var size = 5;//初始化尺寸   
  3.         document.getElementById('color1').onchange = function () {   
  4.             color = this.value;   
  5.         };   
  6.         document.getElementById('size').onchange = function () {   
  7.             size = this.value;   
  8.         };   
  9.         $.Draw.init();//初始化   
  10.         var tag = false;//控制鼠标当前状态并起到开启油墨开关的作用   
  11.         var current = {};//存储鼠标按下时候的点   
  12.         document.onmousedown = function (option) {//鼠标按下事件   
  13.             current.x = option.x;   
  14.             current.y = option.y;   
  15.             $.Draw.Cricle(option.x, option.y, size, color);   
  16.             tag = true;   
  17.         }   
  18.         document.onmouseup = function () {//鼠标抬起事件   
  19.             tag = false;   
  20.         }   
  21.         document.onmousemove = function (option) {//鼠标移动事件   
  22.             if (tag) {   
  23.                 if (size >= 0) {   
  24.                     $.Draw.Cricle(option.x, option.y, size, color);   
  25.                 }    
  26.             }   
  27.         }   

这段代码主要有如下几个意思

1.捕获颜色空间和拖动条控件的change事件,从而获取对应的颜色和尺寸的数值,存储下来供下面画线用

2.初始化画图对象

3.捕获鼠标的按下,抬起和移动事件,关键在一个开关可以控制油墨

好了,一个简单的涂鸦板就好了,上我的书法:

涂鸦板简单实现 Html5编写属于自己的画画板

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

原文链接:http://www.cnblogs.com/bob1314/p/3830220.html

HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 #HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 #HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 #HTML / CSS
HTML5 Web 存储详解
Sep 16 #HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 #HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 #HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 #HTML / CSS
You might like
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Python中生成Epoch的方法
2017/04/26 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python opencv进行图像拼接
2020/03/27 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
主持人婚宴答谢词
2014/01/28 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
个人主要事迹材料
2014/08/26 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2015年班干部工作总结
2015/04/29 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书