本篇文章讲的是利用的canvas的一些属性制作一个简易的画板，由于本人的时间不足，以及能力也有限，所以功能比较简单，喜欢自己学习的同学有兴趣话可以自己加上一些功能。直接上代码了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
margin: 0 auto;
width: 600px;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" style="display: block;margin: auto;border:3px solid red;background: #ccc;">
不支持canvas，请升级浏览器！
</canvas>
<div class="box">
<input type="button" name="" value="清除画布" id="clear" />
<input type="button" name="" value="红色画笔" id="red" />
<input type="button" name="" value="蓝色画笔" id="blue" />
<input type="button" name="" value="黑色画笔" id="black" />
<input type="button" name="" value="紫色画笔" id="zise" />
<input type="button" name="" value="绿色画笔" id="green" />
<input type="button" name="" value="橡皮擦1" id="eraser"/>
<input type="button" name="" value="橡皮擦2" id="eraser2"/>
</div>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
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 'clear':
context.clearRect(0,0,canvas.width,canvas.height);
break;
case 'red':
draw(context,"red");
break;
case 'blue':
draw(context,"blue");
break;
case 'black':
draw(context,"black");
break;
case 'zise':
draw(context,"purple");
break;
case 'green':
draw(context,"green");
break;
case 'eraser':
clear(context,'#ccc');
break;
case 'eraser2':
clearRect(context);
break;
}
}
}
draw(context,"#fff");
var canvasUrl = canvas.toDataURL();
console.log(canvasUrl);
}
//橡皮擦2(清除路径)
function clearRect(cxt){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);
document.onmousemove = function(e){
var e = e || window.event;
cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
}
}
}
//橡皮擦1(用和画布背景颜色相同的颜色，覆盖原有的路径)
function clear(cxt,bgColor){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.beginPath();
cxt.strokeStyle = bgColor;
cxt.lineWidth = 20;//线条的宽度
cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);
document.onmousemove = function(e){
var e = e || window.event;
cxt.lineTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);
cxt.stroke();
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
cxt.closePath();
}
}
}
//绘制路径
function draw(cxt,bgColor){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.beginPath();
cxt.strokeStyle = bgColor;
cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop - 3);
document.onmousemove = function(e){
var e = e || window.event;
cxt.lineTo(e.clientX - canvas.offsetLeft - 3,e.clientY - canvas.offsetTop - 3);
cxt.stroke();
}
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
cxt.closePath();
}
}
</script>
</body>
</html>