【JavaScript学习笔记】画图
<!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学习笔记】画图的更多相关文章
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
- Java程序猿的JavaScript学习笔记（1——理念）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
随机推荐
- ＳＱＬ技术内幕－8 使用WITH AS提高性能简化嵌套SQL
--本文来源:http://www.cnblogs.com/fygh/archive/2011/08/31/2160266.html 一．WITH AS的含义 WITH AS短语,也叫做子查询部分(s ...
- ExtJs之Ext.apply
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- 【BZOJ1878】[SDOI2009]HH的项链 离线BIT
1878: [SDOI2009]HH的项链 Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义 ...
- android真机自动化测试
appium执行用例时报错问题: 问题解析: 一般该种情况都是因为来连接了多个设备,验证办法:cmd->执行adb devices 看结果是否是多个devices ,如果是这个问题,停掉多余设 ...
- Shell练习 统计单词个数，降序排列
原文:https://leetcode.com/problems/word-frequency/ Write a bash script to calculate the frequency of e ...
- 聊聊并发（八）——Fork/Join框架介绍
作者 方腾飞 发布于 2013年12月23日 | 被首富的“一个亿”刷屏?不如定个小目标,先把握住QCon上海的优惠吧!2 讨论 分享到:微博微信FacebookTwitter有道云笔记邮件分享 ...
- java 基本数据类型 回顾
- 用PostGreSQL实现三层(复习)
modal DAL,BLL都是类库的形式 最终结果如下: 数据库代码: -- Table: student -- DROP TABLE student; CREATE TABLE student ( ...
- 293. Flip Game
题目: You are playing the following Flip Game with your friend: Given a string that contains only thes ...
- DOJO 八 event dojo/on
官网教程:Events with Dojo在元素上绑定events,需要引用包dojo/on,通过on方法来实现. <button id="myButton">Clic ...