|
点击查看效果 购买最新的canvas视频教程
<!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1 { border: solid 1px #eee; position: absolute; left: 100px; top: 100px; } </style> </head>
<body> <canvas id="box1" width="500" height="500"></canvas> <input type="button" name="btnopt" id="btnopt" value="点击" /> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var canvas1 = document.querySelector("#box1"); var ctx = canvas1.getContext("2d"); function drawpic(rotev) { ctx.save(); ctx.translate(250, 250); ctx.rotate(rotev); ctx.translate(-250, -250); ctx.clearRect(0,0,canvas1.width,canvas1.height); //先绘制空心圆 ctx.beginPath() ctx.strokeStyle = "black"; ctx.arc(250, 250, 250, 0, 2 * Math.PI, false); ctx.stroke(); ctx.closePath(); //再绘制一半黑色 ctx.beginPath() ctx.strokeStyle = "black"; ctx.arc(250, 250, 250, (90 * Math.PI / 180), (270 * Math.PI / 180), false); ctx.fill() ctx.closePath();
//半圆A
ctx.beginPath(); ctx.arc(250, 125, 125, 0, 2 * Math.PI, false); ctx.fillStyle = "white"; ctx.fill() ctx.closePath();
//半圆B ctx.beginPath(); ctx.arc(250, 375, 125, 0, 2 * Math.PI, false); ctx.fillStyle = "black"; ctx.fill() ctx.closePath();
//小圆A ctx.save(); ctx.beginPath(); ctx.arc(250, 125, 50, 0, 2 * Math.PI, false); ctx.fillStyle = "black"; ctx.fill() ctx.closePath(); ctx.restore();
//小圆A ctx.save(); ctx.beginPath(); ctx.arc(250, 375, 50, 0, 2 * Math.PI, false); ctx.fillStyle = "white"; ctx.fill() ctx.closePath(); ctx.restore(); } drawpic(0); setInterval(function(){ var i=Math.PI/360; drawpic(i); console.log(i); },10) </script> </body>
</html>
点击查看效果 购买最新的canvas视频教程
|