当前位置：首页 > news >正文

html5 涂鸦板

news 来源：原创 2024/5/20 23:50:24

效果图：

<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.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;' οnclick=changeColor('" +colorArr[i] +"');>  </span>";
}


//=======================================================================


}

}

demo地址：

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