<!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>