canvas八卦图1

来源：互联网发布：java轻量级web框架编辑：程序博客网时间：2024/06/05 00:30

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

</head>

<body>

<canvasid="canvas" width="500" height="500"></canvas>

<scripttype="text/javascript">

varcanvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.translate(250,250);

setInterval(function() {

ctx.clearRect(0,0, canvas.width, canvas.height);

ctx.rotate(Math.PI/ -180);

// 大圆

ctx.beginPath();

ctx.arc(0,0, 200, 0, Math.PI* 2, false);

ctx.stroke();

// 大黑半圆

ctx.beginPath();

ctx.fillStyle = "black";

ctx.arc(0,0, 200, Math.PI / 2, Math.PI * 3 / 2, false);

ctx.fill();

ctx.stroke();

// 中白圆

ctx.beginPath();

ctx.strokeStyle= "white";

ctx.fillStyle = "white";

ctx.arc(0,-100, 100,0, Math.PI * 2,false);

ctx.fill();

ctx.stroke();

// 中黑圆

ctx.beginPath();

ctx.strokeStyle= "black";

ctx.fillStyle = "black";

ctx.arc(0,100, 100, 0, Math.PI* 2, false);

ctx.fill();

ctx.stroke();

// 小黑圆

ctx.beginPath();

ctx.fillStyle = "black";

ctx.arc(0,-100, 30,0, Math.PI * 2,false);

ctx.fill();

ctx.stroke();

// 小白圆

ctx.beginPath();

ctx.fillStyle = "white";

ctx.arc(0,100, 30, 0, Math.PI* 2, false);

ctx.fill();

ctx.stroke();

}, 20)

</script>

</body>

</html>

0 0