【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 ...
随机推荐
- C++ 第一次上机作业
今天完成了C++第一次上机作业,感觉比较简单. 题目: 求2个数或3个正整数中的最大数,用带有默认参数的函数实现. 对3个变量按由小到大顺序排序,要求使用变量的引用. 编写一个程序,用同一个函数名对几 ...
- 重温《js权威指南》 第2-3章
第二章 语法结构 2.1 js区分大小写,html不区分大小写 2.5 注意分号,如果没有分号,解释器会试图解析js,并在不能解析的地方加分号 第三章 值和变量 ...
- -ffunction-sections -Wl,--gc-sections
AVR/GCC设置不链接未调用的函数 http://blog.csdn.net/shevsten/article/details/7049688 在AVR Studio4/5的AVR/GCC默认设置下 ...
- OpenStack学习系列-----第二篇 由一个错误看理解整个架构的重要性
看了openstack没几天,然后就开始试着用Java调用所有的API,第一步得到Credentials的时候成功了,然后第二步,传参数使所有的server信息都列出来的时候报错404.具体描述如下( ...
- Android 使用意图传递数据
使用意图传递数据之通用方式. 测试应用:当前页面点击button传递数据到一个新的页面显示在textview中. 首先在,mainActivity.xml文件中加入一个button按钮 <But ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- 怎样用delphi关闭并重新启动 explorer.exe进程
uses Tlhelp32; function KillTask(ExeFileName:string):integer; const PROCESS_TERMINATE = $0001; var C ...
- flex 生命周期 ibm引用
Flex 本质 提起 Flex 我们不得不追述其发展历史以及两个很重要的名词或者说技术,那就是 Flash 和 Flash Player.Flash 是 Adobe 推出的基于时间轴的交互式矢量图和 ...
- hdu - 1728逃离迷宫 && hdu - 1175 连连看 (普通bfs)
http://acm.hdu.edu.cn/showproblem.php?pid=1728 这两道题花了一下午的时候调试,因为以前做过类似的题,但是判断方向的方法是错的,一直没发现啊,真无语. 每个 ...
- NDK(5) Android JNI官方综合教程[JavaVM and JNIEnv,Threads ,jclass, jmethodID, and jfieldID,UTF-8 and UTF-16 Strings,Exceptions,Native Libraries等等]
JNI Tips In this document JavaVM and JNIEnv Threads jclass, jmethodID, and jfieldID Local and Global ...