效果预览：
代码部分：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><canvas id="canvas" width="600" height="600"></canvas><script type="text/javascript">var c = document.getElementById('canvas');var ctx = c.getContext('2d');//画一个黑色矩形ctx.fillStyle = 'black';ctx.fillRect(0,0,600,300);//按下标记var onoff = false;var oldx = -10;var oldy = -10;//设置颜色var linecolor = 'white';//设置线宽var linw = 4;//添加鼠标移动事件canvas.addEventListener('mousemove',draw,true);//添加鼠标按下事件canvas.addEventListener('mousedown',down,false);//添加鼠标弹起事件canvas.addEventListener('mouseup',up,false);function down(event) {onoff = true;oldx = event.pageX-10;oldy = event.pagey-10;}function up() {onoff = false;}function draw(event) {if(onoff == true) {var newx = event.pageX-10;var newy = event.pageY-10;ctx.beginPath();ctx.moveTo(oldx,oldy);ctx.lineTo(newx,newy);ctx.strokeStyle = linecolor;ctx.lineCap = 'round';ctx.stroke();oldx = newx;oldy = newy;}}</script></body></html>
