【JavaScript学习笔记】画图
2013-10-26 16:41
337 查看
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var prex,prey; var flag=0; function start(t,e) { t.style.cursor="crosshair"; prex=e.clientX; prey=e.clientY; flag=1; } function stop() { flag=0; } function draw(t,e) { t.style.cursor="crosshair"; document.getElementById("x").innerHTML=e.clientX; document.getElementById("y").innerHTML=e.clientY; if (flag==1) { var c=document.getElementById("myCan").getContext("2d"); c.moveTo(prex,prey); c.lineTo(e.clientX,e.clientY); c.stroke(); prex=e.clientX; prey=e.clientY; } } function getOut() { flag=0; } </script> </head> <body> <canvas id="myCan" style="border:1px solid #000000" width="256" height="256" onmousemove="draw(this,event)" onmouseout="getOut()" onmousedown="start(this,event)" onmouseup="stop()"> </canvas> <p id="x"></p> <p id="y"></p> </body> </html>
相关文章推荐
- 【JavaScript学习笔记】画图
- JavaScript 学习笔记——cssText
- JavaScript学习笔记之通过DOM操作CSS
- Javascript 学习笔记之基本运算符测试
- JavaScript学习笔记(五)——厚积薄发之准备2
- JavaScript JSON 学习笔记
- JavaScript学习笔记(七)——厚积薄发之小成果
- JavaScript学习笔记2-五种原始数据类型和Object对象类型
- JavaScript学习笔记(十)——学习心得与经验小结
- 【前端学习笔记】深入学习Javascript:Cookie
- JavaScript权威设计--Window对象(简要学习笔记十三)
- JavaScript学习笔记之history常用方法
- 韩顺平 javascript教学视频_学习笔记4_js运算符2_js移位运算
- JavaScript之正则表达式学习笔记
- JavaScript高级程序设计(第3版)学习笔记5 js语句
- Javascript中call与apply的学习笔记
- JavaScript学习笔记:数组
- JavaScript语言精粹学习笔记-语法
- javascript学习笔记
- ”JavaScript 秘密花园“ 学习笔记 :