<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="Justin"> <meta name="Keywords" content="canvas"> <meta name="Description" content="canvas study"> <title>canvas_study</title> </head> <body> <div> <canvas id="test" width="600" height="600" style="border:1px solid #000000;margin-left:300px"></canvas> </div> </body> </html> <script> //用于保存鼠标移动前的坐标 var x=-100; var y=-100; //获取鼠标当前位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; var c=document.getElementById("test"); var ctx=c.getContext("2d"); //线 ctx.moveTo(0,0); ctx.lineTo(600,600); ctx.moveTo(0,600); ctx.lineTo(600,0); ctx.stroke(); //鼠标移动时执行 function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); //清除上一个圆 clear(); var c=document.getElementById("test"); var ctx=c.getContext("2d"); //线 ctx.moveTo(0,0); ctx.lineTo(600,600); ctx.moveTo(0,600); ctx.lineTo(600,0); ctx.stroke(); //圆 ctx.beginPath(); ctx.arc(mousePos.x-300,mousePos.y,40,0,2*Math.PI); ctx.stroke(); x=mousePos.x; y=mousePos.y; } function clear(){ var c=document.getElementById("test"); var ctx=c.getContext("2d"); ctx.clearRect(0,0,600,600); } </script>