HTML5简易涂鸦板制作

最新推荐文章于 2021-06-07 12:52:53 发布

原创最新推荐文章于 2021-06-07 12:52:53 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5

HTML5 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用HTML5创建一个简易的涂鸦板。通过学习和理解英文单词，可以掌握关键代码实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行效果

Hello HTML5 WORLD
代码中主要要学会阅读英文单词，务必认真学习English

代码清单1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
        var startX,startY;
        var flag = false;
            window.onload = function(){
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                ctx.lineWidth = 10;
                ctx.strokeStyle = "rgba(255,0,0,0.5)";

                ctx.stroke();
                //---- 添加鼠标响应事件----
                c.addEventListener("mousedown",function(){
                    var evt = evt || window.event;
                    if(!flag){
                        startX = evt.clientX-10;
                        startY = evt.clientY-10;
                        ctx.moveTo(startX,startY);
                        flag = true;
                    }
                })
                c.addEventListener("mousemove",function(){
                    if(flag){
                        var evt = evt || window.event;//mouse position
                        var curX = evt.clientX-10;
                        var curY = evt.clientY-10;
                        ctx.lineTo(curX,curY);
                        ctx.stroke();
                    }
                })
                c.addEventListener("mouseup",function(){
                    flag = false;
                })
            }
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600"  style="position:absolute;left:10px;top:10px;border: 1px solid blue;;"></canvas>
    </body>
</html>