【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 ...
随机推荐
- 在linux服务器上装svn版本管理，自动部署代码到项目
在linux服务器上装svn版本管理,自动部署代码到项目 http://bbs.aliyun.com/read/9715.html?spm=5176.7114037.1996646101.1.W3zw ...
- iOS后台运行
http://www.cocoachina.com/bbs/read.php?tid=149564 文一 我从苹果文档中得知,一般的应用在进入后台的时候可以获取一定时间来运行相关任务,也就是说可以在后 ...
- eclipse创建python项目
http://jingyan.baidu.com/article/19192ad8173300e53f570757.html
- lintcode: 跳跃游戏 II
跳跃游戏 II 给出一个非负整数数组,你最初定位在数组的第一个位置. 数组中的每个元素代表你在那个位置可以跳跃的最大长度. 你的目标是使用最少的跳跃次数到达数组的最后一个位置. 样例 给出数组A = ...
- TASK_INTERRUPTIBLE 和TASK_UNINTERRUPTIBLE
TASK_INTERRUPTIBLE 和TASK_UNINTERRUPTIBLE TASK_INTERRUPTIBLE 和TASK_UNINTERRUPTIBLE 的区别 TASK_INTERRUPT ...
- Java-马士兵设计模式学习笔记-责任链模式-处理数据
一.目标 数据提交前做各种处理 二.代码 1.MsgProcessor.java public class MsgProcessor { private List<Filter> filt ...
- React-非dom属性-ref标签
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 【golang】用container/list实现栈（Stack）
go语言中的container有heap.list.ring,没有stack. 其中heap是优先级队列,虽然有Push()/Pop()接口,但是使用heap要实现heap.Interface接口,不 ...
- Android ListView无法触发ItemClick事件
Android ListView无法触发ItemClick事件 开发中很常见的一个问题,项目中的listview不仅仅是简单的文字,常常需要自己定义listview,自己的Adapter去继承Base ...
- 拥有更好性能的requesAnimationFrame（Better Performance with requestAnimationFrame）
介绍: 这篇文章讨论的是你可以(也应该)学习通过使用requestAnimationFrame API,而不是使用之前的setInterval/setTimeout方法,来提高动画的性能:如何使用re ...