宝塔服务器面板，一键全能部署及管理，送你3188元礼包，点我领取

我是程序猿

注册

 

返回列表
发新话题 回复该主题
查看: 15268|回复: 0

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

JohnLiu
头像

JohnLiu

  • 管理员
  • 30
  • 420
  • 2019-07-10
1#
t T
发表于 2019-08-14 10:09 |只看楼主

    博主在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>

  10. <script>

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

  21.     function drawDiagonal() {

  23.         var c = document.getElementById("diagonal");
  24.         var ctx = c.getContext("2d");

  26.         var radius = 0;

  28.         var ap = 1.0;
  29.         var d = 1 / (60.0 / 5);
  30.         var i = 0;
  31.         var drawEllipse = setInterval(function () {
  32.             ctx.clearRect(0, 0, 700, 550);
  33.             //radius = 100;
  34.             var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, radius);

  36.             grd.addColorStop(0, "rgba(230, 0, 0, 0)");
  37.             grd.addColorStop(0.25, "rgba(230, 0, 0, " + ap + ")");
  38.             grd.addColorStop(0.5, "rgba(230, 0, 0, 0)");
  39.             grd.addColorStop(0.75, "rgba(230, 0, 0, " + ap + ")");
  40.             grd.addColorStop(1, "rgba(230, 0, 0, 0)");

  42.             ctx.beginPath();
  43.             ctx.arc(100, 100, radius, 0, 2 * Math.PI, true);
  44.             ctx.fillStyle = grd;
  45.             ctx.fill();

  47.             ctx.beginPath();
  48.             ctx.arc(100, 100, 5, 0, 2 * Math.PI, true);
  49.             ctx.fillStyle = "rgba(230, 0, 0,1)";
  50.             ctx.fill();

  52.             if (radius >= 60 && ap <= 1 && ap >= 0) {
  53.                 radius = 1; ap = 1.0;
  54.             }
  55.             i += 1;
  56.             radius += 5;
  57.             ap = ap / 1.16;

  59.         }, 100);

  61.     };

  63.     drawDiagonal();




  68. </script>
  69. </body>
  70. </html>
复制代码
分享 转发
TOP
上一主题| 下一主题
返回列表
发新话题 回复该主题
高级编辑器高级编辑器