运行效果
代码中主要要学会阅读英文单词，务必认真学习English
代码清单1
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script>var startX,startY;var flag = false;window.onload = function(){var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.lineWidth = 10;ctx.strokeStyle = "rgba(255,0,0,0.5)";ctx.stroke();//---- 添加鼠标响应事件----c.addEventListener("mousedown",function(){var evt = evt || window.event;if(!flag){startX = evt.clientX-10;startY = evt.clientY-10;ctx.moveTo(startX,startY);flag = true;}})c.addEventListener("mousemove",function(){if(flag){var evt = evt || window.event;//mouse positionvar curX = evt.clientX-10;var curY = evt.clientY-10;ctx.lineTo(curX,curY);ctx.stroke();}})c.addEventListener("mouseup",function(){flag = false;})}</script></head><body><canvas id="myCanvas" width="800" height="600" style="position:absolute;left:10px;top:10px;border: 1px solid blue;;"></canvas></body></html>
