【JavaScript学习笔记】画图
2017-09-02 21:01
120 查看
<!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——学习笔记
- JavaScript学习笔记[1]---入门
- JavaScript DOM 编程艺术(第二版) 初读学习笔记
- JavaScript学习笔记03——子表达式运算顺序
- Javascript学习笔记:闭包题解(1)
- 《JavaScript 语言精粹》 学习笔记 —— 第四章 函数
- JavaScript学习笔记之事件处理机制
- JavaScript学习记录——《学用 JavaScript 设计模式》学习笔记(3)观察者模式
- Javascript学习笔记(二)Javascript核心之表达式和运算符
- [学习笔记]JavaScript基础--运动应用
- JavaScript 学习笔记(十二) dom
- web 学习笔记3-JavaScript
- JavaScript 学习笔记 之 JavaScript 核心语言对象
- JavaScript 学习笔记
- javascript学习笔记(十) js对象 继承
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
- JavaScript学习笔记 第二记
- javascript 学习笔记
- JavaScript学习笔记(决策语句)