欧美天堂视频,国产理论在线播放,国产精品极品美女在线观看免费

- 龍誠動態
  
  行業新聞
  
  我們的觀點
  
  公司公告
  
  建站技術
  
  網站SEO優化
  
  網站制作流程
  
  產品報價
  - 聯系電話：0577-55882408
  - 傳真號碼：0577-55882411
  - 聯系手機：15224122065
  - 聯系地址：溫州市甌海站南商貿城C幢306
- - 首頁-新聞中心-建站技術
  <!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>