HTML5标准，一个Canvas时钟特效演示

稿源：互联网 2022-04-02 21:40:12 点击： 24754 撤稿纠错

请不要使用IE9以下的IE浏览器。请使用IE9或火狐浏览器运行特效演示效果...

以下讨论的是和Canvas 时钟相关的HTML5标准，一个Canvas时钟特效演示教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html>
<head>
<title>canvas时钟</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000;">您的浏览器不支持Canvas。</canvas>
<script type="text/javascript" language="javascript" charset="utf-8">
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 if(ctx){
  var timerId;
  var frameRate = 60;
  function canvObject(){
   this.x = 0;
   this.y = 0;
   this.rotation = 0;
   this.borderWidth = 2;
   this.borderColor = '#000000';
   this.fill = false;
   this.fillColor = '#ff0000';
   this.update = function(){
    if(!this.ctx)throw new Error('你没有指定ctx对象。');
    var ctx = this.ctx
    ctx.save();
    ctx.lineWidth = this.borderWidth;
    ctx.strokeStyle = this.borderColor;
    ctx.fillStyle = this.fillColor;
    ctx.translate(this.x, this.y);
    if(this.rotation)ctx.rotate(this.rotation * Math.PI/180);
    if(this.draw)this.draw(ctx);
    if(this.fill)ctx.fill();
    ctx.stroke();
    ctx.restore();
   }
  };
  function Line(){};
  Line.prototype = new canvObject();
  Line.prototype.fill = false;
  Line.prototype.start = [0,0];
  Line.prototype.end = [5,5];
  Line.prototype.draw = function(ctx){
   ctx.beginPath();
   ctx.moveTo.apply(ctx,this.start);
   ctx.lineTo.apply(ctx,this.end);
   ctx.closePath();
  };
 
  function Circle(){};
  Circle.prototype = new canvObject();
  Circle.prototype.draw = function(ctx){
   ctx.beginPath();
   ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
   ctx.closePath();
  };
 
  var circle = new Circle();
  circle.ctx = ctx;
  circle.x = 100;
  circle.y = 100;
  circle.radius = 90;
  circle.fill = true;
  circle.borderWidth = 6;
  circle.fillColor = '#ffffff';
 
  var hour = new Line();
  hour.ctx = ctx;
  hour.x = 100;
  hour.y = 100;
  hour.borderColor = "#000000";
  hour.borderWidth = 10;
  hour.rotation = 0;
  hour.start = [0,20];
  hour.end = [0,-50];
 
  var minute = new Line();
  minute.ctx = ctx;
  minute.x = 100;
  minute.y = 100;
  minute.borderColor = "#333333";
  minute.borderWidth = 7;
  minute.rotation = 0;
  minute.start = [0,20];
  minute.end = [0,-70];
 
  var seconds = new Line();
  seconds.ctx = ctx;
  seconds.x = 100;
  seconds.y = 100;
  seconds.borderColor = "#ff0000";
  seconds.borderWidth = 4;
  seconds.rotation = 0;
  seconds.start = [0,20];
  seconds.end = [0,-80];
 
  var center = new Circle();
  center.ctx = ctx;
  center.x = 100;
  center.y = 100;
  center.radius = 5;
  center.fill = true;
  center.borderColor = 'orange';
 
  for(var i=0,ls=[],cache;i<12;i++){
   cache = ls[i] = new Line();
   cache.ctx = ctx;
   cache.x = 100;
   cache.y = 100;
   cache.borderColor = "orange";
   cache.borderWidth = 2;
   cache.rotation = i * 30;
   cache.start = [0,-70];
   cache.end = [0,-80];
  }
 
  timerId = setInterval(function(){
   // 清除画布
   ctx.clearRect(0,0,200,200);
   // 填充背景色
   ctx.fillStyle = 'orange';
   ctx.fillRect(0,0,200,200);
   // 表盘
   circle.update();
   // 刻度
   for(var i=0;cache=ls[i++];)cache.update();
   // 时针
   hour.rotation = (new Date()).getHours() * 30;
   hour.update();
   // 分针
   minute.rotation = (new Date()).getMinutes() * 6;
   minute.update();
   // 秒针
   seconds.rotation = (new Date()).getSeconds() * 6;
   seconds.update();
   // 中心圆
   center.update();
  },(1000/frameRate)|0);
 }else{
  alert('您的浏览器不支持Canvas无法预览.n跟我一起说："Fuck Internet Exploer!"');
 }
</script>
</body>
</html>

关于HTML5标准，一个Canvas时钟特效演示的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011031468614.shtml方便下次再访问哦。

·上一篇： 批量获取图片的title属性值
·下一篇： js实现弹出框及地区选择功能

HTML5标准，一个Canvas时钟特效演示

文章分类LIST >>返回首页

最新游戏

最新新闻