canvas点击切换

最新推荐文章于 2021-12-28 15:24:15 发布

刘一卓

最新推荐文章于 2021-12-28 15:24:15 发布

阅读量709

点赞数 1

本文链接：https://blog.csdn.net/weixin_44081699/article/details/87981857

版权

<!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>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<style>
    *{margin: 0;
    padding: 0;}
body{text-align: center}
canvas{border: 1px solid;
}

#can2{margin-top: -500px;
 display: none;}
</style>
<body>
    <canvas id="can1" width="800" height=" 500"></canvas>
    <canvas id="can2" width="800" height=" 500"></canvas>
    <button id="but">变脸</button>
    <script>
    let ctx=document.getElementById("can1").getContext("2d");
    let ctx1=document.getElementById("can1").getContext("2d");
    ctx.beginPath();
ctx.arc(400,250,200,0,2*Math.PI);
ctx1.strokeStyle='black';
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(300,200,50,0,2*Math.PI);
ctx.fill();
ctx.closePath();
 

ctx.beginPath();
ctx.arc(500,200,50,0,2*Math.PI);
ctx.fill();
ctx.closePath();


ctx.beginPath();
ctx.arc(400,300,50,0,Math.PI,false);
ctx.strokeStyle='red';
ctx.stroke();
ctx.closePath();
   $("#but").toggle(function(){
    ctx.clearRect(0,0,800,500);
    ctx.beginPath();
ctx.arc(400,250,200,0,2*Math.PI);
ctx1.strokeStyle='black';
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(300,200,50,0,2*Math.PI);
ctx.fill();
ctx.closePath();
 

ctx.beginPath();
ctx.arc(500,200,50,0,2*Math.PI);
ctx.fill();
ctx.closePath();


ctx.beginPath();
ctx.arc(400,300,50,0,Math.PI,false);
ctx.strokeStyle='red';
ctx.stroke();
ctx.closePath();

   },
   function(){
    ctx.clearRect(0,0,800,500);
    ctx1.beginPath();
ctx1.arc(400,250,200,0,2*Math.PI);
ctx1.strokeStyle='black';
ctx1.stroke();
ctx1.closePath();

ctx1.beginPath();
ctx1.arc(300,200,50,0,2*Math.PI);
ctx1.fill();
ctx1.closePath();
 

ctx1.beginPath();
ctx1.arc(500,200,50,0,2*Math.PI);
ctx1.fill();
ctx1.closePath();


ctx1.beginPath();
ctx1.arc(400,300,50,0,Math.PI,true);
ctx1.strokeStyle='red';
ctx1.stroke();
ctx1.closePath()
   })
    </script>
</body>
</html>

刘一卓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas点击切换

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫