程序员

HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)

作者:admin 2021-08-10 我要评论

效果图: 方法一: 复制代码 代码如下: !DOCTYPE HTML html body canvas id="myCanvas" width="500" height="500"your browser does not support the canvas tag...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

效果图:

方法一:

复制代码
代码如下:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500">your browser does not support the canvas tag</canvas>
<script type="text/javascript">
var deg = 0;
var r = 30;
var rl = 100;
function drawTaiji() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var colorA = "rgb(0, 0, 0)";
var colorB = "red";

var px =Math.sin(deg)*r;
var py =Math.cos(deg)*r;
context.clearRect(0, 0, 300, 300);
context.beginPath();
context.fillStyle = colorA;
context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
deg +=0.1;
}
setInterval(drawTaiji, 100);
</script> </p> <p></body>
</html>

方法二:

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var angle = 0;
var count = 360;
var clrA = '#000';
var clrB = 'red';

function taiji(x, y, radius, angle, wise) {
angleangle = angle || 0;
wisewise = wise ? 1 : -1;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillStyle = clrA;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(0, 0, radius, 0, Math.PI, false);
ctx.fill();
ctx.fillStyle = clrB;
ctx.beginPath();
ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrA;
ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);
ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
}

loop = setInterval(function () {
beginTag = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
taiji(200, 200, 50, Math.PI * (angle / count) * 2, true);
//taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);
angle = (angle + 5) % count;
}, 50);
</script> </p> <p></body>
</html>


原文链接:https://m.jb51.net/html5/152514.html

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 十月更新修复了Windows 10的Ping of De

    十月更新修复了Windows 10的Ping of De

  • Windows10 UAC弹窗太烦但又不能关?教

    Windows10 UAC弹窗太烦但又不能关?教

  • 老大手把手教我玩 Git 变基!

    老大手把手教我玩 Git 变基!

  • 在Linux终端中展示幻灯片

    在Linux终端中展示幻灯片

腾讯云代理商
精彩导读
海外云服务器
热门资讯
腾讯云代理商