HTML5实现涂鸦板

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

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

先上代码了：

html

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>

效果：

好了，一个简陋的画图界面就搞好啦，

下面开始写一些画线的代码

 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 })

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

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

看代码：

 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.捕获鼠标的按下，抬起和移动事件，关键在一个开关可以控制油墨

好了，一个简单的涂鸦板就好了，上我的书法：

是不是有点闲的蛋疼呢，呵呵！书法不如当年

转载于:https://www.cnblogs.com/bob1314/p/3830220.html

HTML5实现涂鸦板相关推荐

HTML5简易涂鸦板制作
运行效果代码中主要要学会阅读英文单词,务必认真学习English 代码清单1 <!DOCTYPE html> <html><head><meta chars ...
电脑PHP动画制作画板,涂鸦板简单实现 Html5编写属于自己的画画板
这篇文章主要教大家如何使用Html5编写属于自己的画画板,进行绘画.调整颜色等操作,感兴趣的小伙伴们可以参考一下最近了解到html5强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能 ...
java 画笔粗细,javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
html画布画笔粗细,基于javascript html5 canvas实现可调画笔颜色/粗细/橡皮的涂鸦板...
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板 <!doctype html> <head> <meta http-equiv= ...
html5 涂鸦板
效果图: <html> <head> <script src="colorFactory.js"></script><titl ...
HTML5实例教程——简易涂鸦板-何韬-专题视频课程
HTML5实例教程--简易涂鸦板-6858人已学习课程介绍用CANVES制作一个涂鸦板,让初学者初步了解HTML5的语言与功能. 课程收益快速学会涂鸦板的做法,同时对HT ...
Canvas网页涂鸦板再次增强版
目录第一版Canvas涂鸦板第二版Canvas涂鸦板第三版Canvas涂鸦板体验涂鸦板第一版Canvas涂鸦板实现功能:在涂鸦板上鼠标按下去拖动的涂鸦效果实现思路:监听鼠标按下.移动.松 ...
【Qt】2D绘图之涂鸦板
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 程序设计(基本功能) 04. 程序设计(放大功能) 05. 程序设计(放大功能) 06. 附录 01. 概述结合前面所学 ...

HTML5实现涂鸦板

HTML5实现涂鸦板相关推荐

最新文章

热门文章