【Canvas与艺术】硬朗风格十二棱表表盘

【效果图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>硬朗风格十二棱表表盘</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body οnlοad="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="512px" height="512px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 边长
const LENGTH=512;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(LENGTH/2,LENGTH/2);// 原点平移到画布中央

    // 准备
    stage=new Stage();    
    stage.init();
}

// 每一秒调用paintClock函数
setInterval(paintClock,1000);

//-------------------------------
// 绘制时钟
//-------------------------------
function paintClock(){
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     
}

// 舞台类
function Stage(){

    // 初始化
    this.init=function(){

    }

    // 更新
    this.update=function(){

    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏

        // 准备正十二边形
        var polyArr=[];
        for(var i=0;i<12;i++){
            var theta=Math.PI/6*i;
            var pt={};
            pt.x=Math.cos(theta);
            pt.y=Math.sin(theta);
            polyArr.push(pt);
        }

        // 最外圈
        ctx.beginPath();
        for(let i=0;i<polyArr.length;i++){
            ctx.lineTo(250*polyArr[i].x,250*polyArr[i].y);
        }
        ctx.closePath();
        var linegrad=ctx.createLinearGradient(-250,-250,250,250);
        linegrad.addColorStop(0,"rgb(103,103,103)");
        linegrad.addColorStop(1,"rgb(32,32,32)");
        ctx.fillStyle=linegrad;
        ctx.fill();

        // 第二圈
        ctx.beginPath();
        for(let i=0;i<polyArr.length;i++){
            ctx.lineTo(240*polyArr[i].x,240*polyArr[i].y);
        }
        ctx.closePath();
        var linegrad=ctx.createLinearGradient(-240,-240,240,240);
        linegrad.addColorStop(0,"rgb(43,43,43)");
        linegrad.addColorStop(1,"rgb(184,184,184)");
        ctx.fillStyle=linegrad;
        ctx.fill();

        // 第三圈
        ctx.beginPath();
        for(let i=0;i<polyArr.length;i++){
            ctx.lineTo(230*polyArr[i].x,230*polyArr[i].y);
        }
        ctx.closePath();
        ctx.fillStyle="rgb(49,49,49)";
        ctx.fill();

        // 十二时辰
        var hours=["03","04","05","06","07","08","09","10","11","12","01","02"]; 
        for(var i=0;i<12;i++){
            var theta=i*Math.PI/6;
            
            var x3=190*Math.cos(theta);
            var y3=190*Math.sin(theta);

            ctx.save();
            ctx.translate(x3,y3);
            ctx.rotate(theta+Math.PI/2);
            ctx.font="36px Microsoft YaHei UI";
            ctx.textAlign="center";
            ctx.textBaseLine="Middle";
            ctx.fillStyle="rgb(238,176,75)";
            ctx.fillText(hours[i],0,0);
            ctx.restore();
        }

        // 内圈刻度
        for(var i=0;i<60;i++){
            var theta=i*Math.PI/30;
            var x1=180*Math.cos(theta);
            var y1=180*Math.sin(theta);
            var x2=160*Math.cos(theta);
            var y2=160*Math.sin(theta);

            ctx.beginPath();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.closePath();
            ctx.lineWidth=(i%5==0)?3:1;
            ctx.strokeStyle="rgb(231,219,111)";
            ctx.stroke();
        }        
    }

    // 画前景
    this.paintFg=function(ctx){
        // 得到当前时间
        var now=new Date();
        var s=now.getSeconds();
        var m=now.getMinutes();
        var h=now.getHours()+m/60;

        // 画时针
        ctx.save();
        ctx.rotate(h*Math.PI/6-Math.PI/2);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-20,0);
        ctx.lineTo(-20,4);
        ctx.lineTo(120,4);
        ctx.lineTo(130,0);
        ctx.closePath();
        ctx.fillStyle="rgb(171,172,166)";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-20,0);
        ctx.lineTo(-20,-4);
        ctx.lineTo(120,-4);
        ctx.lineTo(130,0);
        ctx.closePath();
        ctx.fillStyle="rgb(252,252,250)";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(80,1);
        ctx.lineTo(110,1);
        ctx.lineTo(110,-1);
        ctx.lineTo(80,-1);
        ctx.closePath();
        ctx.fillStyle="rgb(49,49,49)";
        ctx.fill();

        ctx.restore();

        // 画分针
        ctx.save();
        ctx.rotate(m*Math.PI/30-Math.PI/2);

        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-25,0);
        ctx.lineTo(-25,4);
        ctx.lineTo(130,4);
        ctx.lineTo(140,0);
        ctx.closePath();
        ctx.fillStyle="rgb(171,172,166)";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-25,0);
        ctx.lineTo(-25,-4);
        ctx.lineTo(130,-4);
        ctx.lineTo(140,0);
        ctx.closePath();
        ctx.fillStyle="rgb(252,252,250)";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(90,1);
        ctx.lineTo(120,1);
        ctx.lineTo(120,-1);
        ctx.lineTo(90,-1);
        ctx.closePath();
        ctx.fillStyle="rgb(49,49,49)";
        ctx.fill();
        
        ctx.restore();

        // 画秒针
        ctx.save();
        ctx.rotate(s*Math.PI/30-Math.PI/2);

        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-30,0);
        ctx.lineTo(-30,2);
        ctx.lineTo(130,2);
        ctx.lineTo(130,6);
        ctx.lineTo(160,0);
        ctx.closePath();
        ctx.fillStyle="rgb(171,172,166)";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-30,0);
        ctx.lineTo(-30,-2);
        ctx.lineTo(130,-2);
        ctx.lineTo(130,-6);
        ctx.lineTo(160,0);
        ctx.closePath();
        ctx.fillStyle="rgb(252,252,250)";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(134,2);
        ctx.lineTo(146,0);
        ctx.lineTo(134,-2);
        ctx.closePath();
        ctx.fillStyle="rgb(251,143,56)";
        ctx.fill();

        ctx.restore();

        // 画中心小圆点
        ctx.beginPath();
        ctx.arc(0,0,6,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fillStyle="rgb(251,143,56)";
        ctx.fill();

        ctx.beginPath();
        ctx.arc(0,0,2,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fillStyle="rgb(49,49,49)";
        ctx.fill();

        // 日期
        var tMonth = now.getMonth()+1;　　
        var tDate = now.getDate();
        ctx.font="24px Microsoft YaHei UI";
        ctx.textAlign="center";
        ctx.textBaseLine="Middle";
        ctx.fillStyle="white";
        ctx.fillText(tMonth+"/"+tDate,0,80);

        // 星期
        ctx.textAlign="center";
        ctx.textBaseLine="Middle";
        ctx.fillStyle="rgb(238,176,75)";
        ctx.fillText(getWeekDay(now.getDay()),0,120);
    }
}

// 取当天是星期几
function getWeekDay(idx){
    const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    return days[idx];
}
/*---------------------------------------------
笼鸡有粮刀汤近，野鹤无粮天地宽。
----------------------------------------------*/
//-->
</script>

END

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/498784.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

每日汇评：黄金在2024年第一季度创下历史新高，接下来会发生什么?

每日汇评：黄金在2024年第一季度创下历史新高，接下来会发生什么?

周四&#xff0c;金价创下2236美元的历史新高&#xff0c;为2024年第一季度画上了圆满的句号&#xff1b; 在美债收益率低迷、美国经济强劲的背景下&#xff0c;金价没有受到美元走强的影响&#xff1b; 在复活节期间&#xff0c;金价有望达到2251美元&#xff1b; 黄金价格位于…
阅读更多...
【好书推荐】企业级数据架构

【好书推荐】企业级数据架构

前言 2017年英国《经济学人》杂志提出一个观点&#xff1a;世界上最具价值的资源不再是石油&#xff0c;而是数据。围绕数据的各种概念的提出或者理论层面的探索从未停止过&#xff0c;例如数据要素、数字经济、数字化转型以及数据资产以及定价等。不同行业的企业乃至整个社会…
阅读更多...
直播录制视频软件推荐，提升你的直播质量！

直播录制视频软件推荐，提升你的直播质量！

随着直播行业的蓬勃发展&#xff0c;直播录制视频软件也日益受到广大用户的青睐。无论是为了保存精彩的游戏瞬间&#xff0c;还是为了制作专业的教程视频&#xff0c;一款好的录制软件都是必不可少的。本文将详细介绍三款主流的直播录制视频软件&#xff0c;帮助读者了解它们的…
阅读更多...
EfficientSAM 项目排坑

EfficientSAM 项目排坑

EfficientSAM 项目排坑 任务过程记录创建环境运行示例 任务 跑通这个项目代码 过程记录 创建环境 readme里没有说具体怎么配置环境&#xff0c;所以可能对我来说还挺困难的。 现把项目git下来&#xff1a; git clone https://github.com/yformer/EfficientSAM.git cd Effi…
阅读更多...
中电金信：“人工智能+”首次写入政府工作报告，各大企业何以破局AI模型挑战

中电金信：“人工智能+”首次写入政府工作报告，各大企业何以破局AI模型挑战

2024年全球新一轮技术变革加速来临&#xff0c;大模型作为人工智能发展的核心引擎&#xff0c;正引发一场全新的工业革命。今年全国两会期间&#xff0c;人工智能成为最热话题之一。“人工智能”首次被写入政府工作报告。今年政府工作报告提出&#xff0c;深化大数据、人工智能…
阅读更多...
Java与Go：字符串转IP

Java与Go：字符串转IP

在本文中&#xff0c;我们将了解如何将简单的对比Java和Go是如何将字符串解析为IP地址。 Java 在Java中&#xff0c;将字符串转换为IP地址最无脑的一个方法&#xff1a; import java.net.InetAddress; import java.net.UnknownHostException;public class Main {public stat…
阅读更多...
专题二_滑动窗口(2)

专题二_滑动窗口(2)

目录 1658. 将 x 减到 0 的最小操作数 解析 题解 904. 水果成篮 解析 题解 1658. 将 x 减到 0 的最小操作数 1658. 将 x 减到 0 的最小操作数 - 力扣&#xff08;LeetCode&#xff09; 解析 题解 class Solution { public:int minOperations(vector<int>& num…
阅读更多...
Mojo与Python——wsl安装mojo

Mojo与Python——wsl安装mojo

文章目录 前言一、wsl设置二、安装步骤三、mojo初体验四、vscode联合开发总结 前言 此课程为系列课程&#xff0c;借助python语言来学习python语言的超集mojo。可以持续关注。 一、wsl设置 powershell查看wsl的版本&#xff0c;如果版本是1需要修改为2。 二、安装步骤 1.安装m…
阅读更多...
翔云身份证实名认证接口-PHP调用方法

翔云身份证实名认证接口-PHP调用方法

网络平台集成实名认证接口&#xff0c;是顺应当下网络实名制规定&#xff0c;有效规避法律风险。互联网平台若没有实名认证功能&#xff0c;那么便无法保证网民用户身份的真实性&#xff0c;很有可能被虚假用户攻击&#xff0c;特别是在当网络平台产生垃圾信息乃至是违法信息时…
阅读更多...
[C/C++] -- 二叉树

[C/C++] -- 二叉树

1.简介 二叉树是一种每个节点最多有两个子节点的树结构&#xff0c;通常包括&#xff1a;根节点、左子树、右子树。 满二叉树&#xff1a; 如果一棵二叉树只有度为0的结点和度为2的结点&#xff0c;并且度为0的结点在同一层上&#xff0c;则这棵二叉树为满二叉树。深度为k&a…
阅读更多...
【Redis教程0x08】详解Redis过期删除策略内存淘汰策略

【Redis教程0x08】详解Redis过期删除策略内存淘汰策略

引言 Redis的过期删除策略和内存淘汰策略是经常被问道的问题&#xff0c;这两个机制都是做删除操作&#xff0c;但是触发的条件和使用的策略是不同的。今天就来深入理解一下这两个策略。 过期删除策略 Redis 是可以对 key 设置过期时间的&#xff0c;因此需要有相应的机制将…
阅读更多...
葵花卫星影像应用场景及数据获取

葵花卫星影像应用场景及数据获取

一、卫星参数 葵花卫星是由中国航天科技集团公司研制的一颗光学遥感卫星&#xff0c;代号CAS-03。该卫星于2016年11月9日成功发射&#xff0c;位于地球同步轨道&#xff0c;轨道高度约为35786公里&#xff0c;倾角为0。卫星设计寿命为5年&#xff0c;搭载了高分辨率光学相机和多…
阅读更多...
步态采集平台

步态采集平台

&#x1f349;步骤一、读取视频每一帧图像 &#x1f349;步骤二、对读取的图像进行分割&#xff0c;得到全景下的步态轮廓图。 ​​​​​​​&#x1f349;步骤三、对读取的图像进行裁剪得到归一化的步态轮廓图。 ​​​​​​​&#x1f349;步骤四、保存这一帧步态轮廓图
阅读更多...
日期编号自增

日期编号自增

SimpleDateFormat dateFormata new SimpleDateFormat("yyyyMMdd");String format dateFormata.format(new Date());String hh"CQ20240329001"; // 截取日期部分String surq hh.substring(0,10); // 截取编号String chzc hh.substring(10…
阅读更多...
免费翻译pdf格式论文

免费翻译pdf格式论文

进入谷歌翻译网址https://translate.google.com/?slauto&tlzh-CN&opdocs 将需要全文翻译的pdf放进去 选择英文到中文&#xff0c;然后点击翻译 可以选择打开译文或者下载译文&#xff0c;下载译文会下载到电脑上&#xff0c;打开译文会在浏览器打开。
阅读更多...
【学习笔记】java项目—苍穹外卖day01

【学习笔记】java项目—苍穹外卖day01

文章目录 苍穹外卖-day01课程内容1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 产品原型2.3 技术选型 3. 开发环境搭建3.1 前端环境搭建3.2 后端环境搭建3.2.1 熟悉项目结构3.2.2 Git版本控制3.2.3 数据库环境搭建3.2.4 前…
阅读更多...
Linux：详解TCP协议段格式

Linux：详解TCP协议段格式

文章目录 认识TCPTCP协议段格式 本篇主要总结的是TCP协议的一些字段 认识TCP TCP协议全称是传输控制协议&#xff0c;也就是说是要对于数据的传输进行一个控制 以上所示的是对于TCP协议进行数据传输的一个理解过程 全双工 至此就可以对于TCP协议是全双工的来进行理解了&…
阅读更多...
MYSQL8.0安装、配置、启动、登入与卸载详细步骤总结

MYSQL8.0安装、配置、启动、登入与卸载详细步骤总结

文章目录 一.下载安装包1.方式一.官网下载方式二.网盘下载 二.解压安装三.配置1.添加环境变量 三.验证安装与配置成功四.初始化MYSQL五.注册MySQL服务六.启动与停止MYSQL服务七.修改账户默认密码八.登入MySQL九.卸载MySQL补充&#xff1a;彻底粉碎删除Mysql 一.下载安装包 1.方…
阅读更多...
Aurora IP的Framing帧接口和Streaming流接口

Aurora IP的Framing帧接口和Streaming流接口

本文介绍Aurora IP配置时要选择的接口类型以及两种接口类型之前的区别。 Aurora IP接口有两种模式&#xff1a;Framing帧接口&#xff0c;Streaming流接口 目前一直在用的都是Framing帧接口。 Framing帧接口和Streaming流接口的主要区别是什么呢&#xff1f; 顾名思义&#x…
阅读更多...
一周学会Django5 Python Web开发-Django5模型定义

一周学会Django5 Python Web开发-Django5模型定义

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计41条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…
阅读更多...
最新文章

Copyright @ 2022~2023