0
点赞
收藏
分享

微信扫一扫

canvas制作呼吸灯

 

canvas制作呼吸灯_html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>canvas制作呼吸灯</title>
<style type="text/css">
</style>
</head>

<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var p = [0, 0.5], t_last = 0;
var w = canvas.width;
var h = canvas.height;

$(function () {
var myAction = {};

$.extend(myAction, {
draw: function (r) {
ctx.clearRect(0, 0, w, h);

ctx.save();

ctx.lineWidth = 1;
ctx.strokeStyle = "rgba(105, 159, 169, 1)";
ctx.fillStyle = "rgba(105, 159, 169, 0.4)";
ctx.beginPath();
ctx.arc(150, 75, r[0] * 30, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(50, 75, r[1] * 30, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

ctx.restore();
},
step: function () {
var temp = [0, 0];
for (var i = 0; i < p.length; i++) {
if (p[i] <= 0.98) {
p[i] = p[i] + 0.02;
temp[i] = p[i];
} else if (p[i] <= 1.98) {
p[i] = p[i] + 0.02;
temp[i] = 2 - p[i];
} else {
p[i] = 0;
}
}


myAction.draw(temp);
setTimeout(function () {
myAction.step();
}, 50)
}
});

var init = function () {
myAction.step();
}();
});
</script>
</body>

</html>

 


举报

相关推荐

0 条评论