<!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学习笔记】画图的更多相关文章

  1. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  2. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  4. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  6. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  7. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  8. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  9. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  10. Java程序猿的JavaScript学习笔记（1——理念）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. SGU 107

    107. 987654321 problem time limit per test: 0.25 sec. memory limit per test: 4096 KB For given numbe ...

  2. 转载：PHP,MySQL的安装与配置

    本文转自:http://www.cnblogs.com/janas/archive/2012/08/27/2659240.html 一.安装配置PHP 1.下载Php的版本zip包之后,解压缩到指定目 ...

  3. spring mvc绑定对象String转Date解决入参不能是Date的问题

    使用spring的mvc,直接将页面参数绑定到对象中,对象中有属性为Date时会报错,此时需要处理下. 同样的,其他的需要处理的类型也可以用这种方法. 在controller中加入代码 @InitBi ...

  4. 《JavaScript基础教程（第8版）》PDF

    简介:JavaScript基础教程(第8版)循序渐进地讲述了JavaScript及相关的CSS.DOM.Ajax.jQuery等技术.书中从JavaScript语言基础开始,分别讨论了图像.框架.浏览 ...

  5. window内存管理与内存原理

    转自: http://blog.csdn.net/iamfranter/article/details/6826270 WIndows为每个进程分配了4GB的虚拟地址空间,让每个进程都认为自己拥有4G ...

  6. win7系统中任务计划程序的使用与查询

    任务计划程序是电脑中的一个好工具,用好了,会让我们使用电脑变的很便捷,具体经验教程如下所示: 工具/原料 装有win7系统的电脑 方法/步骤 在桌面找到“我的电脑”,右击,弹出窗口,找到“管理”,如下 ...

  7. hibernate初次配置问题

    1.自动创建表结构 在hibernate.cfg.xml配置文件中修改 <property name="hibernate.hbm2ddl.auto">update&l ...

  8. hdu 4112 Break the Chocolate（ceil floor）

    规律题: #include<stdio.h> #include<math.h> #define eps 1e-8 int main() { int _case; int n,m ...

  9. list, set操作

    def union_list(l1, l2): result = [] if not l1: result.extend(l2) return result if not l2: result.ext ...

  10. mq_close

    NAME mq_close - 关闭一个消息队列 (REALTIME) SYNOPSIS #include <mqueue.h>int mq_close(mqd_t mqdes) DESC ...