帆布画脸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


       <canvas width="800" height="600" style="border:1px solid #c3c3c3" id="ocanvas">
            对不起你的浏览器不支持
       </canvas>
       <input type="submit" value="按钮">
       <script>
           var ocanvas=document.getElementById("ocanvas");
           var ctx= ocanvas.getContext("2d");
           var input=document.getElementsByTagName("input")[0];
           var num=0;
           input.onclick=function () {
               ctx.clearRect(300,350,200,100);
               if(num==0){
                   num++;
                   ctx.beginPath();
                   ctx.arc(400,450,90,-Math.PI/6,-Math.PI/6*5,true);
                   ctx.strokeStyle="black";
                   ctx.stroke();
                   ctx.closePath();
               }
               else if(num==1){
                   num--;
                   ctx.beginPath();
                   ctx.arc(400,350,90,Math.PI/6,Math.PI/6*5,false);
                   ctx.strokeStyle="black";
                   ctx.stroke();
                   ctx.closePath();
               }
           };

           ctx.beginPath();
           ctx.arc(400,300,200,0,Math.PI*2,true);
           ctx.fillStyle="white";
           ctx.stroke();
           ctx.closePath();

           ctx.beginPath();
           ctx.arc(325,240,50,0,Math.PI*2,true);
           ctx.fillStyle="black";
           ctx.fill();
           ctx.closePath();

           ctx.beginPath();
           ctx.arc(325,240,51,0,Math.PI*2,true);
           ctx.strokeStyle="red";
           ctx.stroke();
           ctx.closePath();

           ctx.beginPath();
           ctx.arc(475,240,50,0,Math.PI*2,true);
           ctx.fillStyle="black";
           ctx.fill();
           ctx.closePath();

           ctx.beginPath();
           ctx.arc(475,240,51,0,Math.PI*2,true);
           ctx.strokeStyle="red";
           ctx.stroke();
           ctx.closePath();

           ctx.beginPath();
           ctx.arc(400,350,90,Math.PI/6,Math.PI/6*5,false);
           ctx.strokeStyle="black";
           ctx.stroke();
           ctx.closePath();
       </script>

</body>
</html>
猜你喜欢
