【JavaScript学习笔记】画图

骑猪看日落 2021-12-16 10:47 213阅读 0赞

<!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>

转载于:https://www.cnblogs.com/tiandsp/p/7467815.html

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 UML画图笔记

提纲： 1：面向对象技术 2:模型与可视化建模 3：什么是UML 4：UML发展历史 5：软件过程 6：UML工具 7：UML构成 8：UML实例 9：UML

水深无声/ 2023年10月10日 12:37/ 0 赞/ 48 阅读

相关 JavaScript学习笔记

文章目录 JavaScript学习笔记一、JavaScript基础 1.1 JavaScript 输出 1.

逃离我推掉我的手/ 2023年01月07日 03:48/ 0 赞/ 206 阅读

相关 JavaScript 学习笔记

JavaScript教程参考: [https://wangdoc.com/javascript/index.html][https_wangdoc.com_javascrip

矫情吗；*/ 2022年12月28日 14:07/ 0 赞/ 206 阅读

相关 javascript学习笔记

1、什么是javascript？ javascript是一种脚本语言。脚本，一条条的文字命令。执行是由系统的一个解释器，将其一条条的翻译成机器可识别的指令，然后执行。常见的

小灰灰/ 2022年09月17日 10:27/ 0 赞/ 185 阅读

相关 JavaScript学习笔记

一、JavaScript简介 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代

柔情只为你懂/ 2022年08月27日 10:55/ 0 赞/ 196 阅读

相关 java 学习笔记------画图函数的认识

[paint和paintComponent方法的关系][paint_paintComponent] 博客分类： [Swing][] [Swing][Swin

清疚/ 2022年08月03日 08:30/ 0 赞/ 145 阅读

相关 javascript 学习笔记

注释 “//”表示单行注释 “/\ \/”可以用来多行注释变量 1.变量必须使用字母、下划线(_)或者美元符($)开始。 2.然后

系统管理员/ 2022年06月15日 06:20/ 0 赞/ 252 阅读

相关 python 学习笔记2 --画图(networkx)

绘制基本网络图用matplotlib绘制网络图基本流程： 1. 导入networkx，matplotlib包 2. 建立网络 3. 绘制网络 nx.d

曾经终败给现在/ 2022年06月10日 13:07/ 0 赞/ 202 阅读

相关 javascript学习笔记

javascript是一种轻型的.解释型的程序设计语言.而且具有面向对象的能力.该语言的通用核心已经嵌入了Netscape.Internet Explorer和其他的Web浏览

左手的ㄟ右手/ 2022年01月07日 09:29/ 0 赞/ 339 阅读

相关【JavaScript学习笔记】画图

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"

骑猪看日落/ 2021年12月16日 10:47/ 0 赞/ 214 阅读