涂鸦板简单实现 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动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
新手简单了解vue
2019/05/29 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python日志处理模块logging用法解析
2020/05/19 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
青年教师培训方案
2014/02/06 职场文书
安全承诺书范文
2014/03/26 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby