Three.JS学习 7：使用Canvas画一个时钟

最新推荐文章于 2023-02-10 17:02:25 发布
最新推荐文章于 2023-02-10 17:02:25 发布
阅读量3k 收藏 1
点赞数 1
文章标签： 计算机 图片 3d

本章节不是Three.JS内容，而是Canvas内容
本文学习资源来自：
http://www.dhtmlgoodies.com/tutorials/canvas-clock/

在canvas上画时钟

准备工作

取一张钟表的背景图过来，放在images/ 文件夹下
这里写图片描述

准备canvas

<html>
<head>
   <title>Canvas Clock</title>
</head>
<body> 
   <canvas id="myCanvas" width="400" height="400">
    Your browser does not support canvas
  </canvas> 
<script>
</script>
</body>
</html>

注意这里的canvas的宽、高定义没有使用css的内联属性定义，因为css属性工作不是太好，可能会导致变形。

画钟表面

<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
  Your browser does not support canvas
</canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var clockImage = new Image();
    var clockImageLoaded = false;
    clockImage.onload = function () {
        clockImageLoaded = true;
    }
    clockImage.src = 'images/clock.jpg';

    function addBackgroundImage() {
        context.drawImage(clockImage, 0, 0, canvas.width, canvas.height);
    }

    function drawHourHand() {

    }

    function drawMinuteHand() {

    }

    function drawSecondHand() {

    }

    function writeBrandName() {

    }

    function createClock() {
        addBackgroundImage();
    }

    function clockApp() {
        if (!clockImageLoaded) {
            setTimeout('clockApp()', 100);
            return;
        }
        createClock();
    }

    clockApp();

</script>
</body>
</html>

移动中心点

<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
  Your browser does not support canvas
</canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var clockImage = new Image();
    var clockImageLoaded = false;
    clockImage.onload = function () {
        clockImageLoaded = true;
    }
    clockImage.src = 'images/clock.jpg';

    function addBackgroundImage() {
        //画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
        context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
    }

    function drawHourHand() {

    }

    function drawMinuteHand() {

    }

    function drawSecondHand() {

    }

    function writeBrandName() {

    }

    function createClock() {
        addBackgroundImage();
    }

    function clockApp() {
        if (!clockImageLoaded) {
            setTimeout('clockApp()', 100);
            return;
        }
        //把旋转中心放到canvas的当中
        context.translate(canvas.width / 2, canvas.height / 2);
        createClock();
    }

    clockApp();

</script>
</body>
</html>

画表针

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var clockImage = new Image();
    var clockImageLoaded = false;
    clockImage.onload = function () {
        clockImageLoaded = true;
    }
    clockImage.src = 'images/clock.jpg';

    function addBackgroundImage() {
        //画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
        context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
    }

    function drawHourHand(theDate) {

    }

    function drawMinuteHand(theDate) {

    }

    function drawSecondHand(theDate) {
        var seconds = theDate.getSeconds();

        context.fillStyle = 'red';

        drawHand(150);
    }
    //size是表针的长度
    function drawHand(size) {
        context.beginPath();
        context.moveTo(0, 0); // center
        context.lineTo(-4, -10);
        context.lineTo(0, size * -1);
        context.lineTo(4, -10);
        context.lineTo(0, 0);
        context.fill();
    }
    function writeBrandName() {

    }

    function createClock() {
        addBackgroundImage();

        var theDate = new Date();

        drawHourHand(theDate);
        drawMinuteHand(theDate);
        drawSecondHand(theDate);
    }

    function clockApp() {
        if (!clockImageLoaded) {
            setTimeout('clockApp()', 100);
            return;
        }
        //把旋转中心放到canvas的当中
        context.translate(canvas.width / 2, canvas.height / 2);
        createClock();
    }

    clockApp();

旋转

秒针目前是向上的。现在需要旋转canvas以和得到正确的角度。一会会使用context.rotate()函数，它的参数是弧度。公式是：

function degreesToRadians(degrees){
     return (Math.PI/180)*degrees;
}

一周是360度，所以秒针转到的角度值是seconds*6，修改drawSecondHand:

function drawSecondHand(theDate){
   context.save();

   context.fillStyle = 'red';

   var seconds = theDate.getSeconds();
   context.rotate( degreesToRadians(seconds * 6));

   drawHand(150);

   context.restore(); //旋转后再恢复context状态
}

现在的代码如下：

<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
  Your browser does not support canvas
</canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var clockImage = new Image();
    var clockImageLoaded = false;
    clockImage.onload = function () {
        clockImageLoaded = true;
    }
    clockImage.src = 'images/clock.jpg';

    function addBackgroundImage() {
        //画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
        context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
    }

    function drawHourHand(theDate) {

    }

    function drawMinuteHand(theDate) {

    }

    function drawSecondHand(theDate) {
        context.save();

        context.fillStyle = 'red';

        var seconds = theDate.getSeconds();
        context.rotate(degreesToRadians(seconds * 6));

        drawHand(150);

        context.restore();
    }
    function drawHand(size) {
        context.beginPath();
        context.moveTo(0, 0); // center
        context.lineTo(-4, -10);
        context.lineTo(0, size * -1);
        context.lineTo(4, -10);
        context.lineTo(0, 0);
        context.fill();
    }
    function writeBrandName() {

    }

    function createClock() {
        addBackgroundImage();

        var theDate = new Date();

        drawHourHand(theDate);
        drawMinuteHand(theDate);
        drawSecondHand(theDate);
    }

    function clockApp() {
        if (!clockImageLoaded) {
            setTimeout('clockApp()', 100);
            return;
        }
        //把旋转中心放到canvas的当中
        context.translate(canvas.width / 2, canvas.height / 2);
        setInterval('createClock()', 1000);
    }
    function degreesToRadians(degrees) {
        return (Math.PI / 180) * degrees;
    }

    clockApp();

</script>
</body>
</html>

可以看到秒针已经动起来了。

加上分针与时针

<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
  Your browser does not support canvas
</canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var clockImage = new Image();
    var clockImageLoaded = false;
    clockImage.onload = function () {
        clockImageLoaded = true;
    }
    clockImage.src = 'images/clock.jpg';

    function addBackgroundImage() {
        //画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
        context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
    }

    function drawHourHand(theDate) {
        var hours = theDate.getHours() + theDate.getMinutes() / 60;
        var degrees = (hours * 360 / 12) % 360;

        context.save();
        context.fillStyle = 'black';

        context.rotate(degreesToRadians(degrees));

        drawHand(110, 7);

        context.restore();
    }

    function drawMinuteHand(theDate) {
        var minutes = theDate.getMinutes() + theDate.getSeconds() / 60;

        context.save();
        context.fillStyle = 'black';

        context.rotate(degreesToRadians(minutes * 6));

        drawHand(130);

        context.restore();
    }

    function drawSecondHand(theDate) {
        context.save();

        context.fillStyle = 'red';

        var seconds = theDate.getSeconds();
        context.rotate(degreesToRadians(seconds * 6));

        drawHand(150);

        context.restore();
    }
    function drawHand(size, thickness) {
        thickness = thickness || 4;

        context.beginPath();
        context.moveTo(0, 0); // center
        context.lineTo(thickness * -1, -10);
        context.lineTo(0, size * -1);
        context.lineTo(thickness, -10);
        context.lineTo(0, 0);
        context.fill();
    }
    function writeBrandName() {

    }

    function createClock() {
        addBackgroundImage();

        var theDate = new Date();

        drawHourHand(theDate);
        drawMinuteHand(theDate);
        drawSecondHand(theDate);
    }

    function clockApp() {
        if (!clockImageLoaded) {
            setTimeout('clockApp()', 100);
            return;
        }
        //把旋转中心放到canvas的当中
        context.translate(canvas.width / 2, canvas.height / 2);
        setInterval('createClock()', 1000);
    }
    function degreesToRadians(degrees) {
        return (Math.PI / 180) * degrees;
    }

    clockApp();

</script>
</body>
</html>

效果：
这里写图片描述

下面还有一些画品牌等代码暂略…

编程圈子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【时钟识别】Hough变换指针式时钟识别【含GUI Matlab源码 2085期】
Matlab领域的博客
12-19 341
Hough变换指针式时钟识别 完整的代码，方可运行；可提供运行操作视频！适合小白！
python-opencv的表针识别、自动读数
07-02
通过opencv进行边缘检测、直线检测、圆心检测的等最后求出表盘读数，显示结果 也有直接购买的付费链接https://download.csdn.net/download/qq_44781688/20009503 不急的想白嫖也可以 请私信 如果能看见会回复的
WebGL 可视化3D绘图框架：Three.js 零基础上手实战
09-15
相对于Flash,Flex，Silverlight等富客户端技术，WebGL之ThreeJS：通过OpenGL ES 2.0，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。这是未来的网游趋势，如果你想做可视化动画三维企业应用，又不想用复杂的C++程序，那么 Three.js 将会是你最好的选择。  本课程主要的功效就是让你学习完本教程后，能够写出在浏览器上流畅运行的3D程序，包括但不限于：大数据可视化，360度全景展示，3D游戏，完成这些事情，会比c++用更少的代码。而且更容易，更酷。 在本课程中，我们将由浅入深的讲解这些效果的实现，这能让你迅速提高开发技能，在职场中处于不败之地。课程共十三章，大大小小贯穿了近10个案例，只要你具备基础的HTML和JavaScript基础即可学习。
【Three.js基础】坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸（二）
热门推荐
编码世界
02-10 6万+
Three.js之坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸。
了解Threejs中的Clock对象以及简单应用
fx67ll的博客
12-02 2574
什么是Clock对象 如果你对 JavaScript 有一定了解，那么 JavaScript 的时间对象 Date 你一定不陌生，Clock 本质上就是对 Date 进行封装，提供了一些方法和属性 当你通过 Threejs 编写一些和时间相关程序时候，不用在对 Date 进行封装，直接调用 Clock 对象的方法和属性即可 Clock对象的主要属性和方法 属性.autoStart，Boolean，默认值是true，如果设置为true，则在第一次update 时开启时钟 Clock 属性.startTime
Python-opencv的指针检测、表盘识别算法案例分析
qq_44781688的博客
07-02 7446
Python-opencv的指针检测、表盘识别指针识别前的预处理部分去除表盘，保留指针（效果好可省略）表盘圆心检测主程序段（指针识别到输出）预处理直线检测主要问题/其他方案 指针识别前的预处理部分 主要使用大量灰度，二值化等进行预处理，以至于在后面检测达到好的效果 去除表盘，保留指针（效果好可省略） 首先创建了一个light.py文件，利用两个表盘一样指针不同的图片对应位置比较留下最亮的像素，得到没有指针的表盘。 需要表盘位置比较准确，两张图表盘位置相近，否则太大差异没有意义 不相同也可以通过模板匹配或者截
表盘识别（数字与指针）
xys430381_1的专栏
08-01 8286
指针型 静态图像分割——水表指针提取（一）—（matlab代码） 使用OpenCV进行仪表数值读取—（python 模板匹配+k-means二值分割+直线拟合） OpenCV 指针仪表盘参数读取（一） 方案设计 OpenCV 指针仪表盘参数读取（二） 预处理 OpenCV 指针仪表盘参数读取（三） 圆检测 OpenCV 指针仪表盘参数读取（四） 指针定位 OpenCV 指针仪表盘参数读取（五） 参数计算 附：Opencv基础自学二十（圆检测） 数字表 数字万用表(七段数码管)的图像识别(opencv实现)—
新思路记录单指针识别_进度记录（二）(更新中)
weixin_51271831的博客
02-14 1736
查阅论文后的新思路记录 【1】用canny边缘检测后进行，可以把表盘和指针分开。但是目前只有对单个表盘的研究。多表盘需要研究分割问题。 【2】用HSV色彩提取，红色指针可以解决，但黑色指针暂时会引入其他误差。比如水表盘中央的黑色部件。黑色指针需要解决提取问题。 【3】想要结合，红色和黑色分开的话，用色彩提取红色指针，用canny检测处理黑色指针。也会涉及到多表盘问题。所以暂时实验【1】所说的方法，如果可行，再考虑多表盘提取的研究。 【】二值化 （）最大类间法(效果不好) （）自适应算法 使用阈值类型和自适应
深度学习，指针式仪表自动读数与识别
nonocao的博客
06-29 4454
深度学习的工业应用越来越广，最近用深度学习结合opencv 做了指针仪表识别，鲁棒性很棒，见图 。
three.interaction.js:three.js交互工具包，可帮助您为Three.js构建一个交互事件系统，绑定交互事件，例如browser-dom
05-08
一个全交互事件管理器，帮助three.js绑定交互事件更加简单 安装 npm install -S three.interaction 用法 import { Scene , PerspectiveCamera , WebGLRenderer , Mesh , BoxGeometry , MeshBasicMaterial } from '...
three.js+html5 canvas丝带飘动动画特效
06-11
这是一款three.js+html5 canvas绘制的丝带飘动动画特效，透明的丝带缓缓飘动背景动画效果。
three-canvas:通过使用Three.js轻松使用WebGL的自定义元素
05-16
通过使用Three.js轻松使用WebGL的自定义元素 如何使用 通过Bower安装自定义元素。 $ bower install three-canvas 使用您喜欢的编辑器，如下所示编辑HTML文件，然后另存为index.html。 < html > < head...
clock.js:用 Canvas 绘制的简单时钟
06-24
时钟.js 使用画布元素绘制一个基本的模拟时钟。 演示
blur.canvas.js:各种画布模糊库
05-11
blur.canvas.js 各种画布模糊库方法方法功能构造函数（ RenderingContext2D ，？ Int半径） 建设者setRadius（ Int radius） 设置模糊半径setThreads（ Int线程数） 设置用于渲染大量线程以使浏览器崩溃的线程数...
（五）Threejs基础-Clock时间跟踪动画与Gsap动画库使用
轮回的秋
12-23 1625
threejs Clock对象动画跟踪&Gsap动画库使用
基于MATLAB的表盘指针识别[源码，GUI]
我的博客
07-25 297
一、课题介绍 本设计为基于MATLAB的表盘指针识别，算法原理是基于hough变换。可检测压力表，石英手表，电表刻度，气压表等带指针刻度的表盘。通过hough检测直线和圆的关系，得出指针夹角，根据刻度换算关系得出具体刻度值。算法流程为：原图，灰度变换，二值化，hough变换，刻度指针处刻度定位，计算夹角，得出示数。本设计带有一个人机交互GUI界面，操作人性化，逻辑清晰。 二、GUI界面 ............
基于深度学习的指针式仪表图像智能读数方法
qq_41721951的博客
12-03 1万+
变电站指针式仪表自动读数识别
指针式仪表的自动读数与识别
qq_27545821的博客
05-04 3万+
指针式仪表的自动读数与识别前言步骤概括1.仪表图像预处理2.刻度线提取2.1轮廓查找2.2面积筛选，长宽比，距离2.3刻度线轮廓拟合直线3.指针轮廓提取4.结果5.Pyqt55.1功能测试总结 前言 本文讲述了指针仪表示数读取的过程与方法，灵感来自实验室的长时间数据记录带来的枯燥，自学了python，Pyqt5，opencv的库，断断续续做了大半年，其实真正着手也没有那么困难，只不过在一些处理方法...
为以下代码增加three.js加载进度条：const scene = new THREE.Scene() // 创建一个 THREE.Object3D 对象 const sceneData1 = new THREE.Object3D() // 使用 JSONLoader 加载导出的数据文件 const loader = new THREE.ObjectLoader() const obj = loader.parse(sceneData.scene) scene.add(obj)
最新发布
05-30
为了增加three.js加载进度条，我们需要进行以下步骤： 1. 创建一个HTML元素来显示加载进度条。可以使用HTML5的canvas元素来制作进度条，也可以使用其他的库，如ProgressBar.js等。 2. 使用THREE.LoadingManager来加载模型文件。这个类可以用来跟踪加载的资源的进度，并在所有资源加载完成后调用回调函数。 3. 给THREE.ObjectLoader添加一个onProgress回调函数，在加载每个文件时更新进度条。 下面是修改后的代码示例： ``` const scene = new THREE.Scene(); const sceneData1 = new THREE.Object3D(); // 创建一个LoadingManager对象 const loadingManager = new THREE.LoadingManager(); // 创建一个HTML元素来显示进度条 const progressBar = document.createElement('canvas'); progressBar.width = 200; progressBar.height = 20; document.body.appendChild(progressBar); // 使用ObjectLoader加载模型 const loader = new THREE.ObjectLoader(loadingManager); loader.load('model.json', function (obj) { scene.add(obj); }); // 添加一个onProgress回调函数来更新进度条 loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) { const ctx = progressBar.getContext('2d'); const progress = itemsLoaded / itemsTotal; ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, progressBar.width * progress, progressBar.height); }; ``` 在上面的代码中，我们首先创建了一个THREE.LoadingManager对象和一个HTML canvas元素来显示进度条。然后，我们使用THREE.ObjectLoader加载模型文件，并添加一个onProgress回调函数来更新进度条。最后，我们将模型添加到场景中。 注意：上面的示例中使用的是THREE.ObjectLoader来加载模型文件，如果需要加载其他类型的资源文件，如纹理、音频等，可以使用相应的加载器，并在THREE.LoadingManager对象中注册相应的加载器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值