以下是一个固定转动的带有文字的轮子的html代码我想分别设置这个轮子从左向右移动的速度和文字环绕轮子旋转的速度请修改完善以下html代码!doctype htmlhtmlheadheadbodycanvas width=1000 height=800 style=background#abcdef id=canvascanvasbutton onclick=clearIntervalsStop i
<p><!doctype html></p>
<html>
<head></head>
<body>
<canvas width="1000" height="800" style="background:#abcdef" id="canvas">
</canvas>
<button onclick="clearInterval(s)">Stop interval</button>
<script>
<p>var canvas=document.getElementById('canvas');</p>
<p>var cxt=canvas.getContext('2d');</p>
<p>var count=0;
var speed1 = 5; //设置圆的移动速度为5
var speed2 = 2; //设置文字环绕轮子旋转的速度为2
function funrac(){
cxt.clearRect(0,0,1000,800);</p>
<p>cxt.beginPath();
cxt.lineWidth=8;
cxt.strokeStyle="#ff9900";
cxt.arc(500-count*speed1,400,100,0,360,false); //修改圆心坐标为动态变化的值
cxt.stroke();
cxt.closePath();</p>
<p>for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth=3;
cxt.translate(500-count<em>speed1,400); //修改坐标系为动态变化的值
cxt.rotate(-count</em>speed1+i<em>30</em>Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(0,100);
cxt.stroke();
cxt.closePath();
cxt.restore();</p>
<p>//在外圆周上写上文字
cxt.save();
cxt.translate(500-count<em>speed1,400); //修改坐标系为动态变化的值
cxt.rotate(-count</em>speed1+i<em>30</em>Math.PI/180);
cxt.translate(0,120); //将坐标系向上平移120个单位
cxt.rotate(count<em>speed2</em>Math.PI/180); //让文字随着圆的转动旋转
cxt.fillStyle = "black";
cxt.font = "20px Arial";
cxt.fillText("Text", 0, 0);
cxt.restore();
}
count++;
}
funrac();
var s = setInterval(funrac,100);</p>
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/fk53 著作权归作者所有。请勿转载和采集!