Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
47 lines (47 sloc) 1.28 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body{
background-color: #000;
text-align: center;
}
canvas{
background-color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function(){
let my_canvas = document.getElementById('my_canvas');
let gd = my_canvas.getContext('2d');
my_canvas.onmousedown=function(ev){
let preX = ev.offsetX,preY = ev.offsetY;
document.onmousemove = function(ev){
if(ev.target !== my_canvas){
return;
}
//一旦调用了beginPath,就必须重新moveTo然后再lineTo
gd.beginPath();
gd.moveTo(preX,preY);
gd.lineTo(ev.offsetX,ev.offsetY);
preX=ev.offsetX,preY=ev.offsetY;
gd.lineWidth = 5;
gd.strokeStyle = document.getElementById('my_color').value;
gd.stroke();
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
</script>
</head>
<body>
<input type="color" id="my_color" /><br />
<canvas id="my_canvas" width="800" height="800">
你的浏览器不支持canvas,请升级你的浏览器~
</canvas>
</body>
</html>
You can’t perform that action at this time.