canvas写简易画板和canvas写简易刮刮乐（pc端）

最新推荐文章于 2024-08-24 09:46:09 发布

岁月如歌_

最新推荐文章于 2024-08-24 09:46:09 发布

阅读量466

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/namechenfl/article/details/81408209

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简易画板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #cvs{
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="400"></canvas>
    <button id="btn">画画</button>
    <button id="btn1">清除</button>
    <button id="btn2">重画</button>
</body>
<script>
    var cvs=document.getElementById("cvs");
    var ctx=cvs.getContext("2d");
    var btn=document.getElementById("btn")
    var btn1=document.getElementById("btn1")
    var btn2=document.getElementById("btn2")
    btn.onclick=function(){
        cvs.onmousedown=function(e){
        ctx.beginPath();
        ctx.moveTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop);
        document.onmousemove=function(e){
            ctx.lineTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop);
            ctx.strokeStyle="red";
            ctx.lineWidth=3;
            ctx.stroke()
        }
        document.onmouseup=function(){
            document.onmousedown=null;
            document.onmousemove=null;
        }
      }
    }

    btn1.onclick=function(){
        cvs.onmousedown=function(){
            document.onmousemove=function(e){
                ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,10,10)
            }
        }
        document.onmouseup=function(){
            document.onmousedown=null;
            document.onmousemove=null;
        }
    }
    btn2.onclick=function(){
        ctx.clearRect(0,0,cvs.width,cvs.height);
    }
</script>
</html>

简易pc端刮刮乐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    #cvs{
        border: 1px solid #ddd;
        position: absolute;
        z-index: 9;
        left: 20%;
        top: 20%;
    }
    #con{
        width: 200px;
        height: 100px;
        position: absolute;
        font-size: 24px;
        line-height: 100px;
        text-align: center;
        left: 20%;
        top: 20%;
    }
    </style>
</head>
<body>
    <canvas id="cvs" width="200" height="100">你的浏览器不支持canvas插件，请更换后重试</canvas>
    <div id="con">大奖</div>
</body>
<script>
    var cvs=document.getElementById("cvs");
    var con=document.getElementById("con");
    var ctx=cvs.getContext("2d");
    var arr=["一等奖","劳斯莱斯幻影","谢谢惠顾","辣条一包","对象一个","谢谢惠顾","谢谢惠顾","谢谢惠顾","谢谢惠顾"]
    var i=Math.floor(Math.random()*arr.length);
    con.innerHTML=arr[i];
    ctx.beginPath();
    ctx.fillStyle="#f1f1f1";
   
    ctx.fillRect(0,0,200,100);
    ctx.closePath();

    ctx.beginPath();
    ctx.font="bold 40px 宋体";
    ctx.strokeStyle="#000";
    ctx.strokeText("刮刮乐",50,60);
    ctx.beginPath();

    cvs.onmousedown=function(){
        document.onmousemove=function(e){ 
            var x=e.clientX-cvs.offsetLeft;
            var y=e.clientY-cvs.offsetTop;
            ctx.clearRect(x,y,10,10)
        }
        document.onmouseup=function(){
            document.onmousedown=null;
            document.onmousemove=null;
        }
    }

</script>
</html>