<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> div{ width: 500px; height: 500px; margin: 0 auto; } </style></head><body><div><canvas width="500px" height="500px" id="can" style="transform:rotate(8550deg)"></canvas> <button value="点击">点击</button> </div> <script> var can=document.getElementById("can"); var cans=can.getContext("2d"); var btn=document.getElementsByTagName("button"); function ar(){ btn.onclick=function(){ can.style="transform:rotate(8550deg)"; cans.beginPath(); cans.arc(250,250,200,0,360*Math.PI/180); cans.fillStyle="green"; cans.stroke(); cans.fill(); for(var i=0;i<6;i++){ cans.save(); cans.beginPath(); cans.translate(250,250); cans.rotate(60*i*Math.PI/180); cans.moveTo(0,0); cans.lineTo(0,200); cans.lineWidth=5; cans.stroke(); cans.closePath(); cans.restore(); } cans.save(); cans.beginPath(); cans.translate(250,250); cans.arc(0,0,30,0,360); cans.fillStyle="red"; cans.fill(); cans.restore(); cans.beginPath(); cans.moveTo(230,230); cans.lineTo(170,170); cans.lineWidth="20"; cans.stroke(); cans.closePath(); cans.fillStyle="red"; cans.fillText("一等奖",150,150); cans.fillStyle="red"; cans.fillText("二等奖",300,150); cans.fillStyle="red"; cans.fillText("三等奖",300,350); cans.fillStyle="red"; cans.fillText("特等奖",350,250); cans.fillStyle="red"; cans.fillText("再来一次",170,350); cans.fillStyle="red"; cans.fillText("谢谢惠顾",100,250) } } ar(); setInterval("ar()",1000) </script></div></body></html>
1 回答
- 1 回答
- 1 关注
- 861 浏览
添加回答
举报
0/150
提交
取消