html5 涂鸦板

效果图：

<html>
<head>
<script src="colorFactory.js"></script><title>HTML5涂鸦板</title>

<script type="text/javascript">var drawingBrd;
var context;var penColor ="#FF0000";
var penSize = 1;window.onload = function(){//====================涂鸦板================drawingBrd = document.getElementById("cvsPanel");
context = drawingBrd.getContext("2d");
drawingBrd.onmousedown = mousedownhandler;
document.onmouseup = mouseuphandler;//=============================================//======================调色板================var cf = new colorFactory();
cf.init(document.getElementById("colorBoard"));//=============================================//=======================宽度==================var sizeCtn = document.getElementById("sizeBoard");for(var i = 1;i < 200;i +=2){
sizeCtn.innerHTML += "<span style='border:1px solid #212121;' οnclick=changeSize(" + i/10 + ");>" + "  " +i/10 +"</span>";//"<span style='border:1px solid #212121;width:5px;height:5px;' οnclick=changeSize(" + i/10 + "); >" + i/10 +"</span>";
}
//=============================================//==========================清空===============document.getElementById("btnClear").onclick = function(){
if(!confirm("确认清空吗？")){
return;
}
context.clearRect(0,0,800,600);
}
//=============================================//===========================保存===============document.getElementById("btnSave").onclick = function(){
window.open(drawingBrd.toDataURL(),"保存画布","width=800,height=600,location=no,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,toolbar=no");
}
//==============================================}//==================涂鸦板鼠标事件处理=================function mousedownhandler(e){var canvasMouseX = event.layerX;if (!canvasMouseX) {canvasMouseX = event.x;}var canvasMouseY = event.layerY;if (!canvasMouseY) {canvasMouseY = event.y;}context.strokeStyle = penColor;
context.lineWidth = penSize;
context.beginPath();
context.moveTo(e.x,e.y);
drawingBrd.onmousemove = movedraw;}function movedraw(e){
var canvasMouseX = event.layerX;if (!canvasMouseX) {canvasMouseX = event.x;}var canvasMouseY = event.layerY;if (!canvasMouseY) {canvasMouseY = event.y;}
context.lineTo(e.x,e.y);
context.stroke();
//context.closePath();
}function mouseuphandler(e){
drawingBrd.onmousemove = null;
}//============================================//==========================工具箱方法============function changeColor(color){
penColor = color;
}function changeSize(size){
penSize = size;
}//==============================================</script>

</head><body><!--
涂鸦板
-->
<canvas id="cvsPanel" width="800px" height="600px" style="border:1px solid #000000" >
</canvas><!--
工具箱
-->
<div id="tool" style="float:right"><!--调色板-->
<div id="colorBoard" style="width:400px;height:190px;border: 1px solid #000000;"></div>
<br />
<!--
线条大小
-->
<div id="sizeBoard" style="width:400px;height:230px;border: 1px solid #000000;"></div>
<br /><!--
控制板
-->
<div id="ctlPnl" style="float:right;width:400px;height:50px;border:1px solid #000000;">
<input type="button" id="btnClear" value="清空" />
<input type="button" id="btnSave" value="保存" />
</div><!--
常用图形
--></div>
<br /></body>
</html>

colorFactory.jsfunction colorFactory(ctlId){
}colorFactory.prototype = {//========================初始化调色板==================================
init : function(ctl){
var colorArr = new Array("#990033","#CC6699","#FF6699","#FF3366","#993366","#CC0066","#CC0033","#FF0066","#FF0033","#CC3399",
"#FF3399","#FF9999","#FF99CC","#FF0099","#CC3366","#FF66CC","#FF33CC","#FFCCFF","#FF99FF","#FF00CC",
"#FF66FF","#CC33CC","#CC00FF","#FF33FF","#CC99FF","#9900CC","#FF00FF","#CC66FF","#990099","#CC0099",
"#CC33FF","#CC99CC","#990066","#993399","#CC66CC","#CC00CC","#663366","#660099","#666FFF","#000CCC","#9933CC",
"#666699","#660066","#333366","#0066CC","#9900FF","#333399","#99CCFF","#9933FF","#330099","#6699FF","#9966CC","#3300CC",
"#003366","#330033","#3300FF","#6699CC","#663399","#3333FF","#006699","#6633CC","#3333CC", "#3399CC","#6600CC","#0066FF","#0099CC","#9966FF",
"#0033FF","#66CCFF","#330066","#3366FF","#3399FF","#6600FF","#3366CC","#003399","#6633FF","#000066","#0099FF","#CCCCFF","#000033","#33CCFF","#9999FF",
"#0000FF","#00CCFF","#9999CC","#000099","#6666CC","#0033CC","#FFFFCC","#FFCC00","#CC99090","#663300","#FF6600","#663333","#CC6666","#FF6666","#FF0000",
"#FFFF99","#FFCC66","#FF9900","#FF9966","#CC3300","#996666","#FFCCCC","#660000","#FF3300","#FF6666","#FFCC33",
"#CC6600","#FF6633","#996633","#CC9999","#FF3333","#990000","#CC9966","#FFFF33","#CC9933","#993300","#FF9933",
"#330000","#993333","#CC3333","#CC0000","#FFCC99","#FFFF00","#996600","#CC6633","#99FFFF","#33CCCC","#00CC99","#99FF99","#009966","#33FF33",
"#33FF00","#99CC33","#CCC333","#66FFFF","#66CCCC","#66FFCC","#66FF66","#009933","#00CC33","#66FF00","#336600","#333000","#33FFFF","#339999",
"#99FFCC","#339933","#33FF66","#33CC33","#99FF00","#669900","#666600","#00FFFF","#336666","#00FF99","#99CC99","#00FF66","#66FF33","#66CC00",
"#99CC00","#999933","#00CCCC","#006666","#339966","#66FF99","#CCFFCC","#00FF00","#00CC00","#CCFF66","#CCCC66","#009999","#003333",
"#006633","#33FF99","#CCFF99","#66CC33","#33CC00","#CCFF33","#666633","#669999","#00FFCC","#336633","#33CC66","#99FF66","#006600",
"#339900","#CCFF00","#999966","#99CCCC","#33FFCC","#669966","#00CC66","#99FF33","#003300","#99CC66",
"#999900","#CCCC99","#CCFFFF","#33CC99","#66CC66","#66CC99","#00FF33","#009900","#669900","#669933",
"#CCCC00","#FFFFFF","#CCCCCC","#999999","#666666","#333333","#000000");for(var i = 0;i < colorArr.length;i ++){
ctl.innerHTML += "<span style='background-color:" +colorArr[i] +";border:1px solid #ffffff;' οnclick=changeColor('" +colorArr[i] +"');>  </span>";
}//=======================================================================}}

demo地址：

http://lanliang.web-164.com/html5/paint/panel.html

html5 涂鸦板相关推荐

HTML5实现涂鸦板
最近闲的,看了看html5,强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能有:画画,改色,调整画笔大小 html5的绘图可以分为点,线,面,圆,图片等,点和线,这可是所有平面效果的 ...
电脑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实例教程——简易涂鸦板-何韬-专题视频课程
HTML5实例教程--简易涂鸦板-6858人已学习课程介绍用CANVES制作一个涂鸦板,让初学者初步了解HTML5的语言与功能. 课程收益快速学会涂鸦板的做法,同时对HT ...
Canvas网页涂鸦板再次增强版
目录第一版Canvas涂鸦板第二版Canvas涂鸦板第三版Canvas涂鸦板体验涂鸦板第一版Canvas涂鸦板实现功能:在涂鸦板上鼠标按下去拖动的涂鸦效果实现思路:监听鼠标按下.移动.松 ...
【Qt】2D绘图之涂鸦板
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 程序设计(基本功能) 04. 程序设计(放大功能) 05. 程序设计(放大功能) 06. 附录 01. 概述结合前面所学 ...
[Qt教程] 第17篇 2D绘图（七）涂鸦板
[Qt教程] 第17篇 2D绘图(七)涂鸦板楼主发表于 2013-5-2 21:37:41 | 查看: 1255| 回复: 16 涂鸦板版权声明该文章原创于Qter开源社区(www.qter ...

html5 涂鸦板

html5 涂鸦板相关推荐

最新文章

热门文章