【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 ...
随机推荐
- 【剑指offer】题目38 数字在排序数组中出现的次数
思路: 应该是用二分查找分别找到该数字第一次和最后一次出现的位置,相减即可.O(logn) int findLeft(int a[], int n, int num) { , r = n - ; wh ...
- Android OpenGL 学习笔记 --开始篇
转自: http://www.cnblogs.com/TerryBlog/archive/2010/07/09/1774475.html 1.什么是 OpenGL? OpenGL 是个专业的3D程序接 ...
- AssemblyInfo.cs文件参数具体讲解
在asp.net中有一个配置文件AssemblyInfo.cs主要用来设定生成的有关程序集的常规信息dll文件的一些参数,下面是默认的AssemblyInfo.cs文件的内容具体介绍 //是否符合公共 ...
- STL中set底层实现方式
Q:STL中set底层实现方式? 为什么不用hash? A: 第一个问题:set底层实现方式为RB树(即红黑树). 第二个问题: 首先set,不像map那样是key-value对,它的key与valu ...
- iOS开发多线程--（NSOperation/Queue）
iOS实现多线程的方式有三种,分别是NSThread.NSOperation.GCD. 关于GCD,请阅读GCD深入浅出学习 简介 NSOperation封装了需要执行的操作和执行操作所需的数据,提供 ...
- 简单Ajax例子
一.概述 1.程序执行流程: (1)点击id="testBtn"的按钮,触发validate(); (2)validate()中有调用request.open方法与server交互 ...
- qt练习10 涂鸦板源代码
源代码下载: http://files.cnblogs.com/hnrainll/doodle.zip http://www.cnblogs.com/hnrainll/archive/2011/05/ ...
- 一步步来配置安卓开发环境ADTBundle
前提 安装JDK,并且要正确配置环境变量. 特别要注意安装配置完后,CMD命令行窗口里输入 java 和 javac 查看是否有内容输出,若提示找不到命令就是你JDK配置错误了 至于如何配置JDK看这 ...
- 271. Encode and Decode Strings
题目: Design an algorithm to encode a list of strings to a string. The encoded string is then sent ove ...
- Data Flow ->> Pivot
这个组件和SQL Server的Pivot基本就是一回事.不过我观察到SSIS的Pivot只支持SUM这种聚合类型,并没有找到哪个选择可以设置聚合类型,而T-SQL语法的Pivot则支持多种聚合类型, ...