<!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.οnclick=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>
帆布画脸
最新推荐文章于 2024-08-15 00:48:50 发布