html实现画板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas width="500" height="500"id="canvas" >
<style>
*{padding:0;margin:0;}
body{background: #ccc;}
canvas{
background: #fff;margin: 50px 10px;
}
input{
display: inline-block;
width: 80px;height:30px;cursor: pointer;margin-left: 10px; }
</style>
</canvas>
<div>
<input type=" button" id="red" value="红画笔" />
<input type=" button" id="green" value="绿画笔" />
<input type=" button" id="blue" value="蓝画笔" />
<input type=" button" id="default" value="重置颜色" />
<input type=" button" id="clear" value="清除画布" />
</div>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var oInput=document.getElementsByTagName("input");
for(var i=0;i<oInput.length;i++){
oInput[i].onclick=function(){
var ID=this.getAttribute("id");
switch(ID){
case'red':
ctx.strokeStyle='red';
break;
case'green':
ctx.strokeStyle='green';
break;
case'blue':
ctx.strokeStyle='blue';
break;
case'default':
ctx.strokeStyle='black';
break;
case'clear':
ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
break;
}
}
}
draw();
function draw(){
canvas.onmousedown=function(ev){
var ev =ev||event;
ctx.beginPath();
ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
document.onmousemove=function(ev){
var ev =ev||event;
ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
ctx.stroke();
}
document.onmouseup=function(ev){
document.onmousemove=document.onmouseup=null;
ctx.closePath();
}
}
}
}
</script>
</body>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas width="500" height="500"id="canvas" >
<style>
*{padding:0;margin:0;}
body{background: #ccc;}
canvas{
background: #fff;margin: 50px 10px;
}
input{
display: inline-block;
width: 80px;height:30px;cursor: pointer;margin-left: 10px; }
</style>
</canvas>
<div>
<input type=" button" id="red" value="红画笔" />
<input type=" button" id="green" value="绿画笔" />
<input type=" button" id="blue" value="蓝画笔" />
<input type=" button" id="default" value="重置颜色" />
<input type=" button" id="clear" value="清除画布" />
</div>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var oInput=document.getElementsByTagName("input");
for(var i=0;i<oInput.length;i++){
oInput[i].onclick=function(){
var ID=this.getAttribute("id");
switch(ID){
case'red':
ctx.strokeStyle='red';
break;
case'green':
ctx.strokeStyle='green';
break;
case'blue':
ctx.strokeStyle='blue';
break;
case'default':
ctx.strokeStyle='black';
break;
case'clear':
ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
break;
}
}
}
draw();
function draw(){
canvas.onmousedown=function(ev){
var ev =ev||event;
ctx.beginPath();
ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
document.onmousemove=function(ev){
var ev =ev||event;
ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
ctx.stroke();
}
document.onmouseup=function(ev){
document.onmousemove=document.onmouseup=null;
ctx.closePath();
}
}
}
}
</script>
</body>
</html>