This article is about using some properties of canvas to make a simple drawing board. Due to my lack of time and limited ability, the function is relatively simple. Students who like to learn by themselves can add some functions if they are interested. Go directly to the code.
<!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 is not supported, please upgrade your browser!
</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 'said':
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);
}
//Eraser 2 (clear path)
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;
}
}
}
//Eraser 1 (cover the original path with the same color as the canvas background color)
function clear(cxt,bgColor){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.beginPath();
cxt.strokeStyle = bgColor;
cxt.lineWidth = 20;//The width of the line
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();
}
}
}
// draw the path
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>