html绘制钟表的原理,html5 canvas绘制钟表

终于没有兼容bug了。。。

[html]

* {

margin: 0;

padding: 0;

}

canvas {

box-shadow: 0 0 10px 10px #cccccc;

display: block;

margin: 50px auto 0;

}

window.onload = function() {

new canvasclock({

canvas: document.getelementbyid("canvas"),

r: 100,

h: [0, -30],

m: [0, -60],

s: [0, -90]

})

};

function canvasclock(opts) {

var self = this;

self.r = opts.r;

self.h = opts.h;

self.m = opts.m;

self.s = opts.s;

self.pi = math.pi;

self.canvas = opts.canvas;

self.context = self.canvas.getcontext("2d");

window.setinterval(function() {

self.canvas.width = 0;

self.canvas.height = 0;

self.canvas.width = 400;

self.canvas.height = 400;

self.context.strokestyle = "rgba(255,0,0,0.1)";

self.context.translate(self.r * 2, self.r * 2);

self.createtime("m");

self.createtime("h");

self.createtime("s")

1000)

};

canvasclock.prototype = {

createtime: function(str) {

var self = this;

var context = self.context;

context.linewidth = 1;

context.beginpath();

context.arc(0, 0, self.r, 0, 2 * self.pi, true);

context.stroke();

context.closepath();

var s = (new date()).getseconds();

var m = (new date()).getminutes();

var h = (new date()).gethours();

if (str == "s") {

var t = s * 6;

var x = self.s[0];

var y = self.s[1]

} else if (str == "m") {

var t = (m + s / 60) * 6;

var x = self.m[0];

var y = self.m[1]

} else {

var t = (h + m / 60) * 30;

var x = self.h[0];

var y = self.h[1]

}

context.linewidth = 10;

context.linecap = "round";

context.rotate(t * self.pi / 180);

context.beginpath();

context.moveto(0, 0);

context.lineto(x, y);

context.stroke();

context.closepath()

}

摘自事与愿违

html绘制钟表的原理,html5 canvas绘制钟表相关推荐

html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字
您可能感兴趣的话题: 绘制文字核心提示:如何在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色. 我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体, ...
html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
HTML画正方形钟表,html5 canvas绘制时钟表时间
特效描述:html5 canvas绘制时钟表时间.用canvas精灵绘制器绘制的时钟代码结构 1. 引入JS 2. HTML代码 var Sprite=function(name,painter, ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
放射性渐变色html,html5 canvas绘制放射性渐变色效果
效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...

html绘制钟表的原理,html5 canvas绘制钟表

html绘制钟表的原理,html5 canvas绘制钟表相关推荐

最新文章

热门文章