涂鸦板简单实现 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 相关文章推荐
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
Node.js搭建小程序后台服务
2018/01/03 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python切图九宫格的实现方法
2019/10/10 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
财政专业求职信范文
2014/02/19 职场文书
学生会主席竞聘书
2014/03/31 职场文书
《悯农》教学反思
2014/04/28 职场文书
医院标语大全
2014/06/23 职场文书
教学质量月活动总结
2015/05/11 职场文书
六一儿童节致辞
2015/07/31 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Python必备技巧之函数的使用详解
2022/04/04 Python
字节飞书面试promise.all实现示例
2022/06/16 Javascript