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;' onclick=changeSize(" + i/10 + ");>" + " " +i/10 +"</span>";
//"<span style='border:1px solid #212121;width:5px;height:5px;' onclick=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.js
function 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;' onclick=changeColor('" +colorArr[i] +"');> </span>";
}
//=======================================================================
}
}
demo地址：
http://lanliang.web-164.com/html5/paint/panel.html