canvas版时钟

最新推荐文章于 2022-07-07 17:35:18 发布
最新推荐文章于 2022-07-07 17:35:18 发布
阅读量290 收藏
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52148580
版权

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

canvas {

box-shadow: 0 0 10px paleturquoise;

}

</style>

</head>


<body>

<canvas id="canvas" width="500" height="500"></canvas>

<script type="text/javascript">

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

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


var center = {

x: 250,

y: 250

}

// 时针

var hourLine = {

width: "5",

length: 140,

color: "deeppink"

}

// 分针

var minLine = {

width: "3",

length: 160,

color: "yellow"

}

// 秒针

var secLine = {

width: "2",

length: 180,

color: "blue"

}


function drawLine(obj, deg) {

// var date = new Date();

// var currentDeg = date.getSeconds() * (Math.PI * 2 / 60);

ctx.strokeStyle = obj.color;

ctx.lineWidth = obj.width;

ctx.beginPath();

ctx.moveTo(center.x, center.y);

ctx.lineTo(center.x + obj.length * Math.sin(deg), center.y - obj.length * Math.cos(deg));

ctx.stroke();

}

// drawLine();

setInterval(function() {

// 1. 清屏

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 2.背景

drawBac();

// 3. 画针

var date = new Date();

var hourDeg = date.getHours() * (Math.PI * 2 / 12);

var minDeg = date.getMinutes() * (Math.PI * 2 / 60);

var secDeg = date.getSeconds() * (Math.PI * 2 / 60);

drawLine(hourLine, hourDeg);

drawLine(minLine, minDeg);

drawLine(secLine, secDeg);

}, 1000);


function drawBac() {

ctx.strokeStyle = "deeppink";

// 小圆

ctx.beginPath();

ctx.arc(center.x, center.y, 200, 0, Math.PI * 2, false);

ctx.stroke();

// 大圆

ctx.beginPath();

ctx.arc(250, 250, 210, 0, Math.PI * 2, false);

ctx.stroke();

var deg = 0;

var deg1 = 0;

// 大刻度

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

deg += Math.PI * 2 / 12;

ctx.beginPath();

ctx.moveTo(250 + 180 * Math.cos(deg), 250 - 180 * Math.sin(deg));

ctx.lineTo(250 + 200 * Math.cos(deg), 250 - 200 * Math.sin(deg));

ctx.stroke();

// 小刻度

for (var j = 0; j < 4; j++) {

deg1 += Math.PI * 2 / 12 / 4;

ctx.beginPath();

ctx.moveTo(250 + 190 * Math.cos(deg1), 250 - 190 * Math.sin(deg1));

ctx.lineTo(250 + 200 * Math.cos(deg1), 250 - 200 * Math.sin(deg1));

ctx.stroke();

}

}

ctx.font = "12px DFWaWaSC-W5";

ctx.fillStyle = "mediumspringgreen";

deg = 0;

// 数字

for(var i = 1; i <= 12; i++) {

deg += Math.PI * 2 / 12;

ctx.font = "30px DFWaWaSC-W5";

ctx.fillStyle = "mediumspringgreen";

ctx.fillText(i, 240 + 160 * Math.sin(deg), 260 - 160 * Math.cos(deg));

}

}

</script>

</body>


</html>

Vivian_shuang
关注
专栏目录
H5-Canvas-Clock-时钟
风起叶落，若是不知，岂会心动！
03-28 3425
Canvas 示例：时钟先来看下最终效果图：星期天趁空隙实现了个简单的一个时钟，下面回顾下其实现原理，和遇到的问题，对 H5 这块还是个菜鸟，只有不断通过练习去熟悉了。设计凡是从构思开始，而不是盲目的去实现代码。设计图：从上图中该时钟分为几个部分 画布，背景蓝色部分； 第一个圆：时钟边框，最外层 8 个像素的宽边框； 第二个圆：点圆圈，代表着时间划分，每两个点之间代表 12 分钟（60 / 5 =
canvas画时钟
pumpkin_truck的博客
06-04 2540
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
canvas画布画时钟(事件跟当前时间一样)
qq_44899153的博客
06-27 615
说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开) 效果图 1.关掉注释,有背景图 2.打开注释,无背景图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
js+Canvas实现时钟图，简单易懂
gisercug的博客
07-07 1397
本文主要参考canvas入门网址，加上自己理解将钟表图用原生js写出来，有两个难点 1.整个时钟的实现的难点和重点是save（）和restore（）的进栈 出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈 2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章更...
canvas绘制时钟
qq_40710974的博客
09-29 1014
大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点 https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg
canvas实现时钟
m0_56274171的博客
07-07 726
canvas实现时钟
canvas之时钟
时光清浅处，一步一安然
07-01 288
在画时钟之前，我们先来聊一聊canvas动画。 驱动动画的方法有以下三种：那么我们制作canvas动画使用哪种更好呢？所以在制作canvas动画时，更推荐使用。制作canvas动画的步骤：那么就让我们看看时钟的动画制作吧： 效果如下：
canvas绘制表盘时钟
iunk的博客
02-26 268
canvas學習 先上效果圖吧，最後大擺錘有幾點不會實現，就用其他的頂替了一下下，嘿嘿。大擺錘的gif我放到下面了哈 <div class="container"> <div class="box"> <div class="img1"></div> <canvas id="canvas" width="375" height="650" style="margin: 0 auto;"></canva
canvas实现时钟转动
T_ambition的博客
07-27 473
1、找到canvas的中心，画出表心，以及表款 2、获取当前时间，并根据时间画出时针，分针，秒针，还有刻度 3、使用定时器，没过一秒获取新的时间，并重新绘图，达到时钟转动的效果 1、表心和表框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
JavaScript Canvas绘制时钟
最新发布
02-22
<title>JavaScript Canvas时钟 canvas { border: 1px solid black; } <canvas id="clock" width="300" height="300"></canvas> <script src="clock.js"></script> ``` 接下来，我们将在`clock.js`中...
微信小程序使用canvas绘制实现时钟
11-01
在这个场景下，我们将讨论如何利用canvas来实现一个实时更新的时钟功能。 首先，我们需要在微信小程序的页面配置文件（如`page.json`）中声明canvas组件，设置其在页面中的位置和大小。例如： ```json { ...
canvas时钟效果
08-31
总结来说，这个canvas时钟效果是通过JavaScript和HTML5的Canvas API实现的，它结合了时间更新、数字绘制、动画原理以及可能的用户交互，展示了Canvas在动态网页设计中的强大能力。为了完全实现这个时钟，你需要补充...
Canvas-时钟
10-25
在这个“Canvas-时钟”项目中，我们将会深入探讨如何利用`<canvas>`元素来构建一个实时更新的数字或指针式时钟。 1. **Canvas 基础** - `<canvas>`元素在HTML5中被引入，主要用于在浏览器上动态生成图形。它是一个...
打飞机html + js + canvas
Vivian_shuang的博客
08-09 2710
loading.js文件 // 三个参数： // 1. 所有要加载的图片对象 // 2.加载进度函数 // 3.加载完成函数 function loading(imgsObj, handleObj) { // 遍历对象，得到对象中属性的个数，即有多少张图片 var count = 0; var currentIndex = 0; for(prop in imgsObj)
canvas视频处理
Vivian_shuang的博客
08-09 2589
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> video src="videoviewdemo.mp4" autoplay="" id="video" loop="">你的浏览器不支持视频video> canvas id="canvas" width=
canvas图像叠加
Vivian_shuang的博客
08-09 1632
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document.getElem
飞翔的小鸟
Vivian_shuang的博客
08-09 1451
DOCTYPE html> html> head>     title>Flappy Birdtitle>     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     script type="text/javascript">         // Edit by xingoo    
canvas碰撞检测4
Vivian_shuang的博客
08-09 692
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> *{ margin: 0; padding: 0; } style> head> body> canvas id="canvas" width="500" height="500">canva
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值