<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{border: 1px solid indianred; position: absolute; left: 10px; top: 140px;}
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<button>红</button><br/>
<button>黄</button><br/>
<input type="color"><br/>
<button>矩形</button>
<button>线形</button><br/>
<input type="number">粗细
<canvas></canvas><br/>
<button>橡皮</button>
</body>
<script>
window.onload=function(){
var mycolor="black";
function changeColor(m){
mycolor=m;
}
mycanvas=document.getElementById("mycanvas");
pen=mycanvas.getContext("2d");
col=document.getElementById("col");
Rec=document.getElementById("rec");
line=document.getElementById("line");
erever=document.getElementById("erever");
penweight=document.getElementById("penwidth");
line.onclick=function(){
mycanvas.onmousedown=function(line){
pen.beginPath();
pen.strokeStyle=mycolor;
pen.strokeStyle=col.value;
pen.lineWidth=penweight.value;
x=line.clientX-mycanvas.offsetLeft;
y=line.clientY-mycanvas.offsetTop;
pen.moveTo(x,y);
document.onmousemove=function(line){
x=line.clientX-mycanvas.offsetLeft;
y=line.clientY-mycanvas.offsetTop;
pen.lineTo(x,y);
pen.stroke();
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
rec.onclick=function(){
mycanvas.onmousedown=function(rec){
pen.beginPath();
pen.strokeStyle=col.value;
x=rec.clientX-mycanvas.offsetLeft;
y=rec.clientY-mycanvas.offsetTop;
pen.moveTo(x,y);
document.onmousemove=function(rec){
x0=rec.clientX-mycanvas.offsetLeft;
y0=rec.clientY-mycanvas.offsetTop;
pen.clearRect(x,y,(x0-x-1),(y0-y-1));
}
}
document.onmouseup=function(){
pen.rect(x,y,(x0-x),(y0-y));
pen.stroke();
document.onmousemove=null;
}
}
}
</script>
</html>
新增渐变效果: