涂鸦板简单实现 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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 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
Protoss魔法科技
2020/03/14 星际争霸
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
js中eval详解
2012/03/30 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
哪些情况下不应该使用索引
2015/07/20 面试题
超市开店计划书
2014/04/26 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
特教教师先进事迹
2014/05/21 职场文书
博士生导师推荐信
2014/07/08 职场文书
护理目标管理责任书
2014/07/25 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
公司介绍信范文
2015/01/31 职场文书
2015暑假假期总结
2015/07/13 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS