JavaScript学习笔记画图

Posted 2020-10-05 Dsp Tian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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学习笔记画图的主要内容，如果未能解决你的问题，请参考以下文章

数据结构学习笔记二线性表---顺序表篇（画图详解+代码实现）

《学习opencv》笔记——关于一些画图的函数

学习笔记：python3，代码片段（2017）

ReactJs学习笔记01

Javascript MVC 学习笔记视图和模板