canvas画钟表代码（canvas绘制钟表）[20240421更新]

本篇文章给大家谈谈canvas画钟表代码，以及canvas绘制钟表对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、微信新年代码钟表怎么弄
• 2、FLASH AS2.0代码画圆，想画圆开始位置随系统时间秒的变化而变化。比如当秒针顶端在6点钟位置，在那画
• 3、css怎么样制作钟表
• 4、DW网页怎么设计一个时钟

微信新年代码钟表怎么弄

这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表,文中示例代码介绍的非常详细,...这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表,文中示例代码介绍的非常详细,...这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表,文中示例代码介绍的非常详细,...

FLASH AS2.0代码画圆，想画圆开始位置随系统时间秒的变化而变化。比如当秒针顶端在6点钟位置，在那画

根目录的进口包：

flash.display进口。 *;

进口flash.display.Sprite;

的进口flash.events.MouseEvent;

类DrawCircleTest继承和显示类的子类：影片剪辑（影片剪辑）

定义的私有财产：动画类_canvas（雪碧级）

定义pulinc雪碧（）函数在父类的戏剧舞台：当addFrameScript（APP1），目标的帧数0，时间轴播放播放指定的功能app1.app1执行到指定的帧回调函数实际上是一个事件处理程序，遵循同样的原因。 （注：公共功能雪碧（）定义构造函数不同意减）的

类DrawCircleTest的（）构造函数去解决两个函数进行初始化：

initCanvas的（）;

registerEventHandlers（）;

以下定义上述两个功能，

_canvas =新的Sprite（）（非标）

_canvas.graphics.beginFill（0xF0F0F0）;

_canvas.graphics.drawRect（0，0，stage.stageWidth stage.stageHeight）; / _canvas.graphics.endFill（）; / _canvas.graphics.lineStyle（2为0x000000）;

使用addChild（_canvas）在

创建的实例：VAR _canvas：雪碧=新的Sprite（）;

阶段：绘制一个矩形（颜色：0xF0F0F0 [16进制]），注册点（中心）：（×：0，Y：0）的舞台的宽度和高为准。边界2为0x000000边界。

私有函数registerEventHandlers（）：无效

{ _canvas.addEventListener（MouseEvent.CLICK，onCanvasClick）;

}

私有函数onCanvasClick（事件的MouseEvent）：{无效

_canvas.graphics.drawCircle“（event.localX会event.localY，10）;

}

}

} BR /实例注册点击鼠标事件来触发（onCanvasClick）在onCanvasClick（）影片圈相对鼠标坐标x，y轴的10倍。 （PS：这个参数也不是很清楚，你百度下）。

大概是这个意思的话，程序是沿着解析下来，分为两个功能类的构造函数。

addFrameScript（APP1）;

addFrameScript（0 APP2）;在

APP1和APP2功能的调用运行在时间轴框架。事实上，这是一个未公开的函数，你也可以传递多个参数来：

MovieClip.addFrameScript（0，frame1Method，frame2Method，2，frame3Method）;

这既可以指定触发事件1,2,3帧指定的触发动作，如果有一个以上的在同一帧中指定的动作事件，那么，只有后者的动作会被触发！

完成接受它！ （不要忘了子亲）

css怎么样制作钟表

代码如下：

!DOCTYPE html

html lang="en" xmlns=""

head

meta charset="utf-8" /

titlecanvas实例--制作时钟/title

/head

body

canvas id="canvas" width="500" height="500"

您的浏览器版本太低啦！可以换了！

/canvas

script

//获取canvas

var canvas = document.getElementById("canvas");

//设置环境

var cxt = canvas.getContext("2d");

//制作时钟的函数

function DrawClock() {

//清除画布

cxt.clearRect(0,0,500,500);

//获取当前时间的时，分，秒

var now = new Date();

var hour = now.getHours();

var min = now.getMinutes();

var sec = now.getSeconds();

//小时必须获取浮点型（小时+分数---转化为的小时）

hour = hour + min / 60;

//将24小时转换为12小时

hour = hour 12 ? hour - 12 : hour;

//制作表盘

cxt.beginPath();

cxt.lineWidth = 10;

cxt.strokeStyle = "#ABCDEF";

cxt.arc(250, 250, 200, 0, 360, false);

cxt.stroke();

cxt.closePath();

//刻度

//时针

for (var i = 0; i 12; i++) {

cxt.save();

cxt.lineWidth = 7;

cxt.strokeStyle = "red";

//设置0,0点

cxt.translate(250, 250);

//再设置旋转角度

cxt.rotate(i * 30 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -170);

cxt.lineTo(0, -190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//分针

for (var i = 0; i 60; i++) {

//为避免不同颜色的重叠，

//在时针刻度与分针刻度重叠的位置，不画分针

if (i % 5 == 0) continue;

cxt.save();

//设置刻度粗细

cxt.lineWidth = 5;

cxt.strokeStyle = "purple";

//设置画布的0,0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(i * 6 * Math.PI / 180);

//画分针刻度

cxt.beginPath();

cxt.moveTo(0, -180);

cxt.lineTo(0, -190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//时针

cxt.save();

//设置时针风格

cxt.lineWidth = 7;

cxt.strokeStyle = "pink";

//设置异次元空间的0,0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(hour * 30 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -140);

cxt.lineTo(0, 10);

cxt.closePath();

cxt.stroke();

cxt.restore();

//分针

cxt.save();

//设置分针风格

cxt.lineWidth = 5;

cxt.strokeStyle = "orange";

//设置异次元空间的0,0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(min * 6 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -160);

cxt.lineTo(0, 15);

cxt.closePath();

cxt.stroke();

cxt.restore();

//秒针

cxt.save();

//风格

cxt.strokeStyle = "yellow";

cxt.lineWidth = 3;

//重置0，0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(sec*6*Math.PI/180);

//画图

cxt.beginPath();

cxt.moveTo(0, -170);

cxt.lineTo(0, 20);

cxt.stroke();

//画出时针，分针，秒针的交叉点

cxt.beginPath();

cxt.arc(0, 0, 5, 0, 360, false);

cxt.closePath();

//设置填充样式

cxt.fillStyle = "blue";

cxt.fill();

//设置笔触样式---秒针已设置

cxt.stroke();

//设置秒针前端的小圆点

cxt.beginPath();

cxt.arc(0, -150, 5, 0, 360, false);

cxt.closePath();

//设置填充样式

cxt.fillStyle = "blue";

cxt.fill();

//设置笔触样式

cxt.stroke();

cxt.closePath();

cxt.restore();

}

//调用函数

DrawClock();

//设置时钟转动起来

setInterval(DrawClock, 1000);

/script

/body

/html

DW网页怎么设计一个时钟

!DOCTYPE html

head

meta charset="UTF-8"

title使用canvas元素绘制指针式动画时钟/title

script type="text/javascript"

var canvas;

var context;

//页面装载

function window_onload()

{

canvas=document.getElementById("canvas");//获取canvas元素

context=canvas.getContext('2d');//获取canvas元素的图形上下文对象

setInterval("draw()",1000);//每隔一秒重绘时钟，重新显示时间

}

//绘制时钟

function draw()

{

var radius=Math.min(canvas.width / 2, canvas.height / 2) -25;//时钟罗盘半径

var centerx=canvas.width/2;//时钟中心横坐标

var centery=canvas.height/2;//时钟中心纵坐标

context.clearRect(0,0,canvas.width,canvas.height);//擦除之前所绘时钟

context.save();//保存当前绘制状态

//绘制时钟圆盘

context.fillStyle = '#efefef';//时钟背景色

context.strokeStyle = '#c0c0c0';//时钟边框颜色

context.beginPath();//开始创建路径

context.arc(centerx,centery,radius, 0,Math.PI*2, 0);//创建圆形罗盘路径

context.fill();//用背景色填充罗盘

context.stroke();//用边框颜色绘制罗盘边框

context.closePath();//关闭路径

context.restore();//恢复之前保存的绘制状态

//绘制时钟上表示小时的文字

var r = radius - 10;//缩小半径，因为要将文字绘制在时钟内部

context.font= 'bold 16px 宋体';//指定文字字体

Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r));

Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r));

Drawtext('3', centerx + radius - 10,centery);

Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r));

Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r));

Drawtext('6', centerx, centery + r);

Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r));

Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r));

Drawtext('9', centerx - radius + 10, centery);

Drawtext('10',centerx - (0.866 * r),centery - (0.50 * r));

Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r));

Drawtext('12', centerx, 35);

//绘制时钟指针

var date=new Date();//获取需要表示的时间

var h = date.getHours();//获取当前小时

var m = date.getMinutes();//获取当前分钟

var s=date.getSeconds();//获取当前秒

var a = ((h/12) *Math.PI*2) - 1.57 + ((m / 60) * 0.524);//根据当前时间计算指针角度

context.save();//保存当前绘制状态

context.fillStyle='black'; //指定指针中心点的颜色

context.beginPath();//开始创建路径

context.arc(centerx,centery,3,0,Math.PI * 2, 0);//创建指针中心点的路径

context.closePath();//关闭路径

context.fill();//填充指针中心点

context.lineWidth=3;//指定指针宽度

context.fillStyle='darkgray';//指定指针填充颜色

context.strokeStyle='darkgray';//指定指针边框颜色

context.beginPath();//开始创建路径

//绘制小时指针

context.arc(centerx,centery,radius - 55, a + 0.01, a, 1);

context.lineTo(centerx,centery);

//绘制分钟指针

context.arc(centerx,centery,radius - 40, ((m/60) * 6.27) - 1.57, ((m/60) * 6.28) - 1.57, 0);

context.lineTo(canvas.width / 2, canvas.height / 2);

//绘制秒钟指针

context.arc(centerx,centery,radius - 30, ((s/60) * 6.27) - 1.57, ((s/60) * 6.28) - 1.57, 0);

context.lineTo(centerx,centery);

context.closePath();//关闭路径

context.fill();//填充指针

context.stroke();//绘制指针边框

context.restore();//恢复之前保存的绘制状态

//指定时钟下部当前时间所用的字符串，文字格式为hh:mm:dd

var hours = String(h);

var minutes = String(m);

var seconds = String(s);

if (hours.length == 1) h = '0' + h;

if (minutes.length == 1) m = '0' + m;

if (seconds.length == 1) s = '0' + s;

var str =h + ':' + m + ':' +s;

//绘制时钟下部的当前时间

Drawtext(str, centerx, centery + radius + 12);

}

function Drawtext(text, x, y)

{

//因为需要使用到坐标平移，所以在平移前线保存当前绘制状态

context.save();

x -= (context.measureText(text).width / 2);//文字起点横坐标

y +=9;//文字起点纵坐标

context.beginPath();//开始创建路径

context.translate(x, y);//平移坐标

context.fillText(text,0,0);//填充文字

context.restore();

}

/script

style

div{

display: -moz-box;

display: -webkit-box;

-moz-box-pack: center;

-webkit-box-pack: center;

width:100%;

}

canvas{

background-color:white;

}

/style

/head

body onload="window_onload()"

divh1使用canvas元素绘制指针式动画时钟/h1/div

divcanvas id="canvas" width="200px" height="200px"/canvasdiv//这里就是你的时钟的位置。

/body

/html

canvas画钟表代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于canvas绘制钟表、canvas画钟表代码的信息别忘了在本站进行查找喔。