<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> canvas{ border: 1px dashed black; } .btnStyle{ } </style> <script> var penColor = "red"; var penSize = ""; var mouseX;//鼠标x位置 var mouseY;//鼠标y位置 var obj; function getPen(string){ if(string == '1') penColor = "red"; else if(string == '2') penColor = "blue"; else if(string == '3') penColor = "green"; } function getPoint(string){ if(string == '4') penSize = 3; else if(string == '5') penSize = 6; else if(string == '6') penSize = 8; } function draw() { obj = document.getElementById("myCanvas") var context = obj.getContext("2d"); context.lineWidth = penSize; context.beginPath(); context.moveTo(mouseX,mouseY); mouseX = event.clientX;//鼠标x位置 mouseY = event.clientY;//鼠标y位置 //alert(mouseX); //alert(mouseY); context.strokeStyle = penColor; context.lineCap = "round"; context.fillStyle = "blanchedalmond"; context.fill(); context.lineTo(mouseX,mouseY); //context.lineTo(10,10); context.closePath(); context.stroke(); } function updatePos() { mouseX = event.clientX;//鼠标x位置 mouseY = event.clientY;//鼠标y位置 } </script> </head> <body> <div> <form name="mypaint"> <table align="center" border=0 cellspacing="0" width="800px" height="400px" cellpadding="0"> <tr align="center"> <td><input onclick="getPen('1')" id="redPen" type="button" value="" style="border:0;50px;height:50px;background:url(./img/pen_red.gif) no-repeat;"/></td> <td rowspan=7> <canvas id="myCanvas" onmousedown="draw()" onmouseup="updatePos()" width="600px" height="400px"> </canvas> </td></tr> <tr align="center"><td><input onclick="getPen('2')" id="bluePen" type="button" value="" style="border:0;50px;height:50px;background:url(./img/pen_blue.gif) no-repeat;"/></td></tr> <tr align="center"><td><input onclick="getPen('3')" id="greenPen" type="button" value="" style="border:0;50px;height:50px;background:url(./img/pen_green.gif) no-repeat;"/></td></tr> <tr align="center"><td><input onclick="getPoint('4')" id="thinPoint" type="button" value="" style="border:0;50px;height:50px;background:url(./img/pen_thin.gif) no-repeat;"/></td></tr> <tr align="center"><td><input onclick="getPoint('5')" id="mediumPoint" type="button" value="" style="border:0;50px;height:50px;background:url(./img/pen_medium.gif) no-repeat;"/></td></tr> <tr align="center"><td><input onclick="getPoint('6')" id="thickPoint" type="button" value="" style="border:0;50px;height:50px;background:url(./img/pen_thick.gif) no-repeat;"/></td></tr> <tr align="center"><td><input onclick="clear()" id="thickPoint" type="button" value="保存" /> <input onclick="clear()" id="thickPoint" type="button" value="清空" /> </td></tr> </table> </form> </div> </body> </html>