【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 ...
随机推荐
- BZOJ 1877: [SDOI2009]晨跑 费用流
1877: [SDOI2009]晨跑 Description Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧撑.仰卧起坐等 等,不过到目前为止,他坚持下来的只有晨跑. 现在给出一 ...
- iOS开发--验证码
第一步,拖两个空间textfiled和button到storyboard上的viewcontroller上. 第二步,拖线,链接到.h文件中代码如下: 1 @property (weak, nonat ...
- SWD应用接口
随着ARM公司对Cortex系列的推出,采样SWD方式调试成了大家的首选.SWD不仅速度可以与JTAG媲美,而且使用的调试线少得多.很多人在采样SWD方式进行调试时,一般都是采用4线: ① VCC ...
- 【原创】Eclipse中为SVN设置快捷键
SVN是深受开发者喜爱的版本控制工具,其较CVS有更好的控制策略.在Android开发中,我也选择SVN作为版本控制工具.Eclipse的SVN插件名叫Subclipse,可以到htt ...
- JavaScript ECAMScript5 新特性——get/set访问器
之前对get/set的理解一直有误,觉得get set 是对象属性方法.看了别人的博客也有很多疑问,今天系统的做了很多测试终于弄明白了.(自己通过看书和写demo测试的,如有不对欢迎大家批评指正) g ...
- PowerDesigner-自定义生成WORD
PowerDesigner-自定义生成WORD_旧梦重温 分类: web 2014-02-26 21:08 1563人阅读 评论(48) 收藏 举报 目录(?)[+] 1统一建立模型 2导出自定义 ...
- SSIS ->> Error Handling
Event Handler Each task and container raises events as it runs, such as an OnError event, among seve ...
- 生成n对括号的所有合法排列
实例 n = 3,所有的合法序列 ((())) (()()) (())() ()(()) ()()() 思路 针对一个长度为2n的合法排列,第1到2n个位置都满足如下规则 左括号的个数≥右括号的个数 ...
- stanford-postagger中文词性标注
安装 系统需要安装Java1.6+ http://nlp.stanford.edu/software/tagger.shtml 下载Download full Stanford Tagger vers ...
- 使用Windows Azure PowerShell远程管理Windows Azure虚拟机
对于Windows Azure,如果你还在使用windowsazure.com门户来管理虚拟机,那就显得不怎么高上大了.Windows Azure PowerShell 是一个功能强大的脚本环境,可用 ...