博主在2011年接触并利用silverlight开发富客户端的应用程序，深深被silverlight实现的高交互性、人性化设计所吸引，但是近几年随着HTML5的崛起，浏览器去active控件化的趋势，博主渐渐开始接触HTML5，针对silverlight实现的报警动画效果，博主简单实现了HTML5报警动画效果。代码仅仅为实现效果，没有进行优化，不足之处，还望不吝赐教。
动画效果如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="support"><canvas id="diagonal" style="border: 1px solid;" width="200" height="200"></canvas></div>
<script>
function checkCanvas() {
try {
document.createElement("canvas").getContext("2d");
$("#support").html("您的浏览器支持HTML5 Canvas");
} catch (e) {
$("#support").html("您的浏览器不支持HTML5 Canvas");
}
};
function drawDiagonal() {
var c = document.getElementById("diagonal");
var ctx = c.getContext("2d");
var radius = 0;
var ap = 1.0;
var d = 1 / (60.0 / 5);
var i = 0;
var drawEllipse = setInterval(function () {
ctx.clearRect(0, 0, 700, 550);
//radius = 100;
var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, radius);
grd.addColorStop(0, "rgba(230, 0, 0, 0)");
grd.addColorStop(0.25, "rgba(230, 0, 0, " + ap + ")");
grd.addColorStop(0.5, "rgba(230, 0, 0, 0)");
grd.addColorStop(0.75, "rgba(230, 0, 0, " + ap + ")");
grd.addColorStop(1, "rgba(230, 0, 0, 0)");
ctx.beginPath();
ctx.arc(100, 100, radius, 0, 2 Math.PI, true);
ctx.fillStyle = grd;
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 5, 0, 2 Math.PI, true);
ctx.fillStyle = "rgba(230, 0, 0,1)";
ctx.fill();
if (radius >= 60 && ap <= 1 && ap >= 0) {
radius = 1; ap = 1.0;
}
i += 1;
radius += 5;
ap = ap / 1.16;
}, 100);
};
drawDiagonal();
</script>
</body>
</html>
评论区