【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 ...
随机推荐
- POJ 3276
Face The Right Way Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 2193 Accepted: 103 ...
- HDU 1385 Minimum Transport Cost (Dijstra 最短路)
Minimum Transport Cost http://acm.hdu.edu.cn/showproblem.php?pid=1385 Problem Description These are ...
- POJ 1870 Bee Breeding（找规律）
题目链接 题意 : 给你一个蜂巢状图形,让你找出两个点之间的距离. 思路 : 在做这个题之前可以看一下2265,因为是一种题来着,规律就是我在2265里写的那样,然后就是求距离了,求距离的时候只需考虑 ...
- hdu 4061 A Card Game
思路: 分析:假设取的牌顺序是一个序列,那么这种序列在末尾为1时是和取牌序列一一对应的,且是符合“游戏结束时牌恰好被取完”的一种情况. 简证:1.在序列中,任一数 i 的后一个数 j 是必然要放在第 ...
- jmeter 异步子请求测试随笔
好久没写技术类的博客了,都不知道自己都在忙啥.... 最近陆续遇到了一些异步子请求的测试需求,比如打开某一个页面A,A页面里的js会再调用B,C,D,E等请求,针对这个页面的测试,我最近做了一些思考: ...
- cache写策略
cache写策略 Write Through (完全写入) CPU向cache写入数据时,同时向memory也写一份,使cache和memory的数据保持一致.优点是简单,缺点是每次都要访问memor ...
- 注塑成型工艺知识大全（Injection Molding）
注塑成型,广泛用于热塑性塑料产品的制造工艺 工艺成本:模具费用(高),单件费用(低) 典型产品:汽车塑料部件,消费电子产品塑料外壳等 产量适合:只适合大批量生产 质量:极高的表面精确度,同一批次的产品 ...
- ubuntu启动eclipse时出错cannot open display
由于要学习hadoop,就在ubuntu下创建了一个hadoop用户,但是eclipse是在naomi用户下装的,在root和naomi用户下都能正常启动,但是一旦切换到hadoop用户,试着启动ec ...
- [IT] 关闭笔记本的蜂鸣提示
很久没有写什么了,今天开过workshop, 稍微放松些, 一时动念上来看看,没想到最近一篇都是2010年的了, 不得不感叹时光流逝之快啊. 那就写点什么吧. 现在每天工作用的DELL笔记本,性能差强 ...
- C# 读取指定URL的内容
#region 读取指定URL的内容 /// <summary> /// 读取指定URL的内容 /// </summary> /// <param name=" ...