涂鸦板简单实现 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中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 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面向对象法则
2012/02/23 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
秘书岗位职责
2013/11/18 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
学习三严三实心得体会
2014/10/13 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书