canvas-画旋转的八卦
程序员文章站
2022-05-30 12:05:03
...
一、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border: 1px solid;
}
.anniu{
width:100px;
height: 35px;
font-family: "微软雅黑";
font-size: 15px;
background-color: darkgrey;
border-radius: 10px;
color: white;
border: none;
font-weight: bold;
cursor: pointer;
margin: 15px;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<input type="button" onclick="ssz()" value="按顺时针旋转" class="anniu" />
<input type="button" onclick="lsz()" value="按逆时针旋转" class="anniu"/>
<input type="button" onclick="zt()" value="暂停" class="anniu"/>
<input type="button" onclick="qj()" value="前进" class="anniu"/>
<script type=" text/javascript">
var mycanvas;
var hb;
var jiaodu=0;
var jiaodu1=0;
var jiaodu2=0;
var zhaunxiang=1;
var zhuanxiang1=1;
var zhuanxiang2=1;
var sszid=0;
var lszid=0;
var qjid=0;
var x1=1250,y1=300;
var x2=100,y2=300;
window.onload=function(){
mycanvas=document.getElementById("mycanvas");
mycanvas.width=1350;
mycanvas.height=400;
hb=mycanvas.getContext("2d");
hb.fillStyle="gray";
hb.fillRect(0,0,1350,400);
drawtaiji(1250,300,100,0);
drawtaiji(100,300,100,0);
};
function qj(){
// clearInterval(lszid);
// clearInterval(sszid);
if(qjid==0){
qjid=setInterval(function(){
hb.clearRect(0,0,1350,400);
hb.fillStyle="gray";
hb.fillRect(0,0,1350,400);
drawtaiji(x1,y1,100,jiaodu1);
drawtaiji(x2,y2,100,jiaodu2);
jiaodu1++;jiaodu2--;
var zhouchang=Math.PI/180*100;
x1+=zhouchang*zhuanxiang1;
if(x1>=1250){
zhuanxiang1=-1;
}
else if(x1<=100){
zhuanxiang1=1;
}
x2+=zhouchang*zhuanxiang2;
if(x2>=1250||x2<=100){
zhuanxiang2*=-1;
}
},10);
}
}
function ssz(){
if(sszid==0){
clearInterval(lszid);
sszid=setInterval(function(){
hb.clearRect(0,0,1350,400);
hb.fillStyle="gray";
hb.fillRect(0,0,1350,400);
drawtaiji(x1,y1,100,jiaodu);
drawtaiji(x2,y2,100,-jiaodu);
jiaodu+=zhaunxiang;
},10);
}
lszid=0
}
function lsz(){
if(lszid==0){
clearInterval(sszid);
lszid=setInterval(function(){
hb.clearRect(0,0,1350,400);
hb.fillStyle="gray";
hb.fillRect(0,0,1350,400);
drawtaiji(x1,y1,100,jiaodu);
drawtaiji(x2,y2,100,-jiaodu);
jiaodu-=zhaunxiang;
},10);
}
sszid=0
}
function zt(){
clearInterval(lszid);
clearInterval(qjid);
qjid=0;
lszid=0;
jiaodu=0;
clearInterval(sszid);
sszid=0;
}
function drawtaiji(x,y,R,jiaodu){
//Math.PI/180表示每一角度对应的弧度（pi），乘以角度就是对应的弧长
var hudu=Math.PI/180*jiaodu;
//创建黑大半圆
hb.beginPath();
hb.arc(x,y,R,hudu,hudu+Math.PI);
hb.fillStyle="black";
hb.fill();
//创建白大半圆
hb.beginPath();
hb.arc(x,y,R,hudu+Math.PI,hudu);
hb.fillStyle="white";
hb.fill();
//创建白小完整圆
hb.beginPath();
hb.arc(x+(R/2*Math.cos(hudu)),y+(R/2*Math.sin(hudu)),R/2,0,2*Math.PI);
hb.fillStyle="white";
hb.fill();
//创建黑小完整圆
hb.beginPath();
hb.arc(x-(R/2*Math.cos(hudu)),y-(R/2*Math.sin(hudu)),R/2,0,2*Math.PI);
hb.fillStyle="black";
hb.fill();
//创建实心黑圆
hb.beginPath();
hb.arc(x+(R/2*Math.cos(hudu)),y+(R/2*Math.sin(hudu)),10,0,2*Math.PI);
hb.fillStyle="black";
hb.fill();
//创建实心白圆
hb.beginPath();
hb.arc(x-(R/2*Math.cos(hudu)),y-(R/2*Math.sin(hudu)),10,0,2*Math.PI);
hb.fillStyle="white";
hb.fill();
}
</script>
</body>
</html>
二、效果图