利用canvas实现简易绘图版demo

最新推荐文章于 2022-12-07 14:52:48 发布

Kratial

最新推荐文章于 2022-12-07 14:52:48 发布

阅读量604

点赞数 1

本文链接：https://blog.csdn.net/Kratial/article/details/108844548

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{
            background:lightblue;
        }
    </style>
</head>
<body>
    <canvas id="content" width="500px" height="500px" background=""></canvas>
    <div class="tool">
        <button id="btn1">改变颜色</button>
        <button id="btn2">清空画布</button>
        <button id="btn3">使用橡皮擦</button>
        <button id="btn4">使用画笔</button>
    </div>
    
    <script>
        //获取容器创建画布、
        var content=document.querySelector("#content"),
        
       
        colorBtn=document.querySelector("button"),
        clearPage=document.querySelector("#btn2"),
        ecolor="lightblue"
        erBtn=document.querySelector("#btn3"),
        ctx=content.getContext('2d'),
        tag=false,
        tage=false;
 
        // 实现一个绘画板
        // 1.画布的样式设置
        
        //涉及到的事件有鼠标按下，鼠标移动，鼠标弹起
        content.addEventListener("mousedown",function(e){
           tag=true;
           ctx.beginPath();
           
        });
        content.addEventListener("mousemove",function(e){
            if(!tag) return;
            if(tag&&!tage){
              
                ctx.lineTo(e.clientX,e.clientY);
                ctx.stroke();
                
            }
            if(tage){
                ctx.beginPath();
                ctx.fillStyle=ecolor?ecolor:"white";
               ctx.arc(e.clientX,e.clientY,10,0,Math.PI*2);
               ctx.closePath();
               ctx.fill();

            }
            
           
        })
        content.addEventListener("mouseup",function(e){
            ctx.closePath();
            tag=false;
        });
        document.addEventListener("click",function(e){
            debugger
            var btn=e.target.getAttribute("id");
            switch(btn){
                case "btn1":
                ctx.strokeStyle="#"+Math.ceil(Math.random()*1000);
                break;
                case "btn2":
                ctx.clearRect(0,0,content.width,content.height);
                ctx.beginPath();
                break;
                case "btn3":
                tage=true;
                break;
                case "btn4":
                tage=false;
                break;
                default:
                break;
            }
        })
      

    </script>
</body>
</html>

Kratial

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用canvas实现简易绘图版demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #content{
复制链接

扫一扫