我是程序猿

注册

 

发新话题 回复该主题

HTML5实现动态报警动画 [复制链接]

1#

    博主在2011年接触并利用silverlight开发富客户端的应用程序,深深被silverlight实现的高交互性、人性化设计所吸引,但是近几年随着HTML5的崛起,浏览器去active控件化的趋势,博主渐渐开始接触HTML5,针对silverlight实现的报警动画效果,博主简单实现了HTML5报警动画效果。代码仅仅为实现效果,没有进行优化,不足之处,还望不吝赐教。

动画效果如下:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="support"><canvas id="diagonal" style="border: 1px solid;" width="200" height="200"></canvas></div>

  9. <script>

  10.     function checkCanvas() {
  11.         try {
  12.             document.createElement("canvas").getContext("2d");
  13.             $("#support").html("您的浏览器支持HTML5 Canvas");
  14.         } catch (e) {
  15.             $("#support").html("您的浏览器不支持HTML5 Canvas");
  16.         }
  17.     };

  18.     function drawDiagonal() {

  19.         var c = document.getElementById("diagonal");
  20.         var ctx = c.getContext("2d");

  21.         var radius = 0;

  22.         var ap = 1.0;
  23.         var d = 1 / (60.0 / 5);
  24.         var i = 0;
  25.         var drawEllipse = setInterval(function () {
  26.             ctx.clearRect(0, 0, 700, 550);
  27.             //radius = 100;
  28.             var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, radius);

  29.             grd.addColorStop(0, "rgba(230, 0, 0, 0)");
  30.             grd.addColorStop(0.25, "rgba(230, 0, 0, " + ap + ")");
  31.             grd.addColorStop(0.5, "rgba(230, 0, 0, 0)");
  32.             grd.addColorStop(0.75, "rgba(230, 0, 0, " + ap + ")");
  33.             grd.addColorStop(1, "rgba(230, 0, 0, 0)");

  34.             ctx.beginPath();
  35.             ctx.arc(100, 100, radius, 0, 2 * Math.PI, true);
  36.             ctx.fillStyle = grd;
  37.             ctx.fill();

  38.             ctx.beginPath();
  39.             ctx.arc(100, 100, 5, 0, 2 * Math.PI, true);
  40.             ctx.fillStyle = "rgba(230, 0, 0,1)";
  41.             ctx.fill();

  42.             if (radius >= 60 && ap <= 1 && ap >= 0) {
  43.                 radius = 1; ap = 1.0;
  44.             }
  45.             i += 1;
  46.             radius += 5;
  47.             ap = ap / 1.16;

  48.         }, 100);

  49.     };

  50.     drawDiagonal();




  51. </script>
  52. </body>
  53. </html>
复制代码
分享 转发
TOP
发新话题 回复该主题