【Canvas与表盘】绘制黄蓝两色简约表盘

news2024/9/20 22:50:53

【成图】

【代码】

<!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="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
            <img id="myImg" src="406.jpg" style="display:none;"/>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=512;
const HEIGHT=512;

// 舞台对象
var stage;

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

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移

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

    // 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     

    // 循环
    if(true){
        //sleep(100);
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    // 初始化
    this.init=function(){
        
    }

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

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

    // 画前景
    this.paintFg=function(ctx){
        // 底色
        ctx.fillStyle = "white";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

        const R=100;// 基准尺寸

        // 黑色横向渐变外框
        var r=R*1.05;
        var gnt=ctx.createLinearGradient(-r,0,r,0);
        gnt.addColorStop(0,"black");
        gnt.addColorStop(0.35,"grey");
        gnt.addColorStop(0.5,"lightgrey");
        gnt.addColorStop(0.65,"grey");
        gnt.addColorStop(1,"black");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();

        
        // 黑色竖向渐变外框
        r=R;
        var gnt1=ctx.createLinearGradient(0,-r,0,r);
        gnt1.addColorStop(0,"black");
        gnt1.addColorStop(0.45,"grey");
        gnt1.addColorStop(0.5,"lightgrey");
        gnt1.addColorStop(0.55,"grey");
        gnt1.addColorStop(1,"black");
        ctx.fillStyle=gnt1;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();

        // 表盘
        r=R-5;
        ctx.fillStyle="white";
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();

        // 刻度
        r=R-5;
        for(var i=0;i<60;i++){
            var theta=i*Math.PI/30;
            var rad1=r/20*19;
            var pt=createPt(rad1*Math.cos(theta),rad1*Math.sin(theta));
            var rad2=r/20*18;
            var pt2=createPt(rad2*Math.cos(theta),rad2*Math.sin(theta));            
                
            ctx.strokeStyle="grey";
            ctx.beginPath();
            ctx.moveTo(pt.x,pt.y);
            ctx.lineTo(pt2.x,pt2.y);
            ctx.stroke();            
        }

        // 小时背景
        var N=12;
        const PART=Math.PI/45;
        r=R;
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;
            var r1=r*0.96;
            var a=createPt(r1*Math.cos(theta),r1*Math.sin(theta));

            var angle=theta+PART;
            var b=createPt(r1*Math.cos(angle),r1*Math.sin(angle));

            angle=theta-PART;
            var c=createPt(r1*Math.cos(angle),r1*Math.sin(angle));

            var r2=r*0.75;
            var o=createPt(r2*Math.cos(theta),r2*Math.sin(theta));

            angle=theta+PART;
            var e=createPt(r2*Math.cos(angle),r2*Math.sin(angle));

            angle=theta-PART;
            var d=createPt(r2*Math.cos(angle),r2*Math.sin(angle));

            ctx.lineWidth=1;
            ctx.strokeStyle="black";

            ctx.fillStyle=((i%2==0)?"rgb(255,185,24)":"rgb(71,132,195)");
            ctx.beginPath();
            ctx.moveTo(b.x,b.y);
            ctx.lineTo(e.x,e.y);
            var radius=r2*Math.sin(PART);
            ctx.arc(o.x,o.y,radius,theta+Math.PI/2,theta+Math.PI/2*3,false);
            ctx.lineTo(d.x,d.y);
            ctx.lineTo(c.x,c.y);
            ctx.arc(0,0,r1,theta-PART,theta+PART,false);
            ctx.lineTo(b.x,b.y);
            ctx.closePath();
            ctx.fill();
        }

        // 小时数字
        // 数字
        r=R*0.75;
        var hours=["Ⅲ","Ⅳ","Ⅴ","Ⅵ","Ⅶ","Ⅷ","Ⅸ","Ⅹ","Ⅺ","Ⅻ","Ⅰ","Ⅱ"]; 
        for(var i=0;i<12;i++){
            var theta=i*Math.PI/6;
            var pt=createPt(r*Math.cos(theta),r*Math.sin(theta));

            ctx.save();
            ctx.translate(pt.x,pt.y);
            ctx.rotate(theta+Math.PI/2);
            ctx.font=R/12.5+"px Microsoft YaHei UI";
            ctx.textAlign="center";
            ctx.textBaseLine="Middle";
            ctx.fillStyle="white";
            ctx.fillText(hours[i],0,0);
            ctx.restore();
        }

        // 得到当前时间
        var now=new Date();
        var s=now.getSeconds();
        var m=now.getMinutes();
        var h=now.getHours()+m/60;

        // 画三根针        
        drawMinutePointer(ctx,m,R*0.40);
        drawSecondPointer(ctx,s,R*0.60);
        drawHourPointer(ctx,h,R*0.05);

        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

// 画秒针
function drawSecondPointer(ctx,s,radius){
    const R=radius;
    const W=R/40;

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

    // 长杆
    ctx.fillStyle="rgb(71,132,195)";
    ctx.beginPath();
    ctx.lineTo(0,W);
    ctx.lineTo(R,W);
    ctx.arc(R,0,W,Math.PI/2,-Math.PI/2,true);
    ctx.lineTo(R,-W);
    ctx.lineTo(-R/3,-W);
    ctx.lineTo(-R/3,W);
    ctx.closePath();    
    ctx.fill();

    // 圆球配重
    ctx.beginPath();
    ctx.arc(-R/3,0,3*W,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();

    ctx.restore();
}

// 画分针
function drawMinutePointer(ctx,m,radius){
    const R=radius;
    const W=R/10;

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

    // 短杆
    ctx.fillStyle="rgb(255,185,24)";
    ctx.beginPath();
    ctx.lineTo(0,W);
    ctx.lineTo(R,W);
    ctx.arc(R,0,W,Math.PI/2,-Math.PI/2,true);
    ctx.lineTo(R,-W);
    ctx.lineTo(0,-W);
    ctx.closePath();    
    ctx.fill();

    ctx.restore();
}

// 画时针
function drawHourPointer(ctx,h,radius){
    const R=radius;

    ctx.save();
    ctx.rotate(h*Math.PI/6-Math.PI/2);

    ctx.fillStyle="black";
    ctx.beginPath();
    ctx.arc(0,0,1.2*R,0,Math.PI*2,false);
    ctx.closePath();    
    ctx.fill();

    ctx.fillStyle="rgb(71,132,195)";
    ctx.beginPath();
    ctx.arc(R-2,0,0.2*R,0,Math.PI*2,false);
    ctx.closePath();    
    ctx.fill();

    ctx.restore();
}

/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
color:填充圆的颜色
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,color){
    ctx.fillStyle=color;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){
    var retval={};
    retval.x=x;
    retval.y=y;
    return retval;
}

/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {
    const date = Date.now();
    let currDate = null;
    while (currDate - date < milliSeconds) {
        currDate = Date.now();
    } 
}

/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){
    ctx.save();
    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.font = font;
    ctx.fillStyle=color;
    ctx.fillText(text,x,y);
    ctx.restore();
}

/*-------------------------------------------------------------
You must be the change you wish to see in the end!
--------------------------------------------------------------*/
//-->
</script>

END

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【我的Android进阶之旅】解决CardView四个圆角有白边的问题

【我的Android进阶之旅】解决CardView四个圆角有白边的问题

文章目录 一、问题描述二、分析CardView出现白边的原因三、如何解决这个问题？3.1 如何修复？3.2 为什么这样可以修复？3.3 示例代码3.4 总结一、问题描述 在实现一个RecycleView的Item时候，样式需要用到卡片式效果，于是想到用CardView来实现，但是最终发现运行出来的效果，…
阅读更多...
（微服务项目）新闻头条——Day1

（微服务项目）新闻头条——Day1

最近发生了很多事情&#xff0c;躺了一阵子&#xff0c;也是终于振作起来做自己的事情了.... 有的人追求精彩而活&#xff0c;而即使瘦若浮游&#xff0c;仍旧痴迷71种滋味&#xff0c;而有的人寿命明却装醉不得自由虚度自己的光阴&#xff0c;年华终究在最后一刻幡然醒悟&…
阅读更多...
Android Studio新建工程(Java语言环境)

Android Studio新建工程(Java语言环境)

一、新建工程流程(java语言环境) 1、File->New->New Project 2、选择“Empty Views Activity” -> Next 3、创建项目名称/项目路径/语言环境 1&#xff09;项目名称&#xff1a;使用默认Name 或 修改Name 2) Package name&#xff1a;每个项目的这个名称唯一&…
阅读更多...
MySQL 创建数据库和表全攻略

MySQL 创建数据库和表全攻略

一、MySQL 创建数据库与表的重要性 MySQL 作为广泛应用的关系型数据库管理系统&#xff0c;创建数据库和表具有至关重要的意义。 在数据存储方面&#xff0c;数据库就如同一个巨大的仓库&#xff0c;为各类数据提供了安全、有序的存储环境。通过创建数据库&#xff0c;可以将相…
阅读更多...
计算机毕业设计体育资讯个性化推荐网站网站内容留言评论前台注册后台管理/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序

计算机毕业设计体育资讯个性化推荐网站网站内容留言评论前台注册后台管理/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序

一、网站内容 ‌个性化推荐‌&#xff1a;根据用户浏览历史和兴趣&#xff0c;推送相关体育资讯。‌丰富资讯‌&#xff1a;包含体育赛事直播、新闻报道、专栏评论等。 二、留言评论系统 ‌用户互动‌&#xff1a;允许用户对资讯进行留言和评论&#xff0c;增强社区互动性。…
阅读更多...
python基础知识 （五）--容器、索引、切片、字符串的遍历、查找、修改元素

python基础知识 （五）--容器、索引、切片、字符串的遍历、查找、修改元素

目录 容器 容器大总结 索引 切片 字符串的遍历 for循环语法&#xff1a; while循环语法&#xff1a; 查找元素 修改元素 例题 1.验证码 2.抽取大红包 3.a和b互换位置 容器 在Python中&#xff0c;常见容器有&#xff1a; &#xff08;1&#xff09;字符串&#x…
阅读更多...
k8s的加密配置secret和应用配置configmap

k8s的加密配置secret和应用配置configmap

目录 加密配置 secret的三种类型 创建opaque类型的两种方式 方法一 方法二 如何把secret挂载到pod当中 把secret作为环境变量传到pod当中 指定harbor私有仓库加密的secret配置 应用配置 configmap 创建configmap的方式 在pod里面用configmap做pod的环境变量 **用c…
阅读更多...
[Linux入门]---使用exec函数实现简易shell

[Linux入门]---使用exec函数实现简易shell

文章目录 1.简易实现2.人机交互&#xff0c;获取命令行3.命令行分割4.执行命令5.内建命令6.myshell代码 1.简易实现 2.人机交互&#xff0c;获取命令行 代码如下&#xff1a; int quit0; #define LEFT "[" #define RIGHT "]" #define LABLE "#&quo…
阅读更多...
如何免费试用OpenAI o1 preview大模型

如何免费试用OpenAI o1 preview大模型

OpenAI于 2024 年 9 月 12 日推出 o1&#xff08;以前称为 Strawberry 项目&#xff09; 。这一系列新推理模型旨在更有效地解决复杂问题。ChatGPT Plus 和 Team 用户可以访问 o1-preview 和 o1-mini&#xff0c;但消息量有限。 OpenAI o1-preview与 GPT-o对比 o1-previewGPT…
阅读更多...
Excel 基础知识-操作手册2

Excel 基础知识-操作手册2

十、查找与引用函数 Excel中的查找与引用函数非常丰富&#xff0c;以下是一些主要的函数及其使用示例&#xff1a; 1. **VLOOKUP** - 语法&#xff1a;VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup]) - 示例&#xff1a;假设A列是员工编号&#xff0c;B…
阅读更多...
27 顺序表 · 链表

27 顺序表 · 链表

目录 一、单链表 &#xff08;一&#xff09;概念 1、节点 2、链表的性质 &#xff08;二&#xff09;单链表的实现 &#xff08;三&#xff09;单链表算法题 1、移除链表元素 2、反转链表 3、链表的中间节点 4、合并两个有序的单链表 5、链表分割 6、链表的回文结构…
阅读更多...
pdf怎么加页码？5种pdf添加页码指南分享，快来领取！

pdf怎么加页码？5种pdf添加页码指南分享，快来领取！

如何在一个包含大量页面的大型pdf文件中快速找到特定的页面或信息呢&#xff1f;最简便的方法就是为pdf添加页码。pdf添加页码能够清晰显示页面顺序&#xff0c;帮助读者轻松浏览大型pdf文档&#xff0c;同时也便于寻找特定章节和确定整体长度。然而&#xff0c;并非所有pdf文件…
阅读更多...
VirtualBox Install MacOS

VirtualBox Install MacOS

环境搭建 git clone https://github.com/myspaghetti/macos-virtualbox 脚本配置 修改macos-guest-virtualbox.sh部分内容为 vm_name"macOS" # name of the VirtualBox virtual machine macOS_release_name"Catalina" # install &quo…
阅读更多...
PHP 环境搭建教程

PHP 环境搭建教程

搭建一个稳定的PHP开发环境是开发Web应用的基础。在Linux系统上&#xff0c;LAMP&#xff08;Linux, Apache, MySQL/MariaDB, PHP&#xff09;堆栈是最广泛使用的组合。本文将详细介绍如何在Linux上搭建PHP开发环境&#xff0c;涵盖安装步骤、配置和测试。更多内容&#xff0c;…
阅读更多...
Docker操作MySQL

Docker操作MySQL

1&#xff0c;拷贝&#xff1b; docker cp mysql01:/etc/mysql .2&#xff0c;修改conf.d和mysql.conf.d文件 3&#xff0c; vim mysql/my.cnf 4&#xff0c;拷贝并替换my.cnf文件 5&#xff0c;mysql镜像重启命令&#xff1a; docker exec -it mysql01 -uroot -p0000006&…
阅读更多...
LOAM学习

LOAM学习

LOAM Ceres Solver 中的LocalParameterization理解ALOAM雷达里程计主要步骤论文A-LOAM laser Odometry代码LiDAR Odometry寻找角点特征代码流程分析寻找面点特征 求解器设置 Ceres Solver 中的LocalParameterization理解 该LocalParameterization类用来解决非线性优化中的过参…
阅读更多...
最全的软件测试面试题（含答案）

最全的软件测试面试题（含答案）

软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试用例 用例编号 　测试项目 　测试标题 　重要级别 　预置条件　 输入数据 　执行步骤　　 预期结果 1…
阅读更多...
python做游戏好用吗

python做游戏好用吗

Python做游戏是完全可以的&#xff0c;而且也非常简单&#xff0c;有一个专门针对游戏开发的平台&#xff08;模块&#xff09;—pygame&#xff0c;允许开发人员快速设计游戏而又摆脱了低级语言的束缚&#xff0c;下面我简单介绍一下这个模块的安装和使用&#xff1a; 1、首先…
阅读更多...
Java手写RPC框架-01-开篇

Java手写RPC框架-01-开篇

项目背景 随着业务不断升级&#xff0c;系统规模不断扩大&#xff0c; 单体架构会产生越来越多的问题&#xff0c;需要引入微服务将原先架构解耦为一个个模块。每个服务模块放在不同的服务器上&#xff0c;能够保证系统在高并发环境下的正常运转。 各个服务模块之间如何相互调…
阅读更多...
想了解医疗大模型吗？请看《智能系统学报》实验室最新综述论文

想了解医疗大模型吗？请看《智能系统学报》实验室最新综述论文

本文改编自实验室的最新综述论文《医疗领域的大型语言模型综述》&#xff0c;该论文发表于《智能系统学报》。《智能系统学报》是中国人工智能学会会刊、“中国人工智能学会推荐中文学术期刊”列表中的A类期刊。该论文合作单位包括上海理工大学、上海儿童医学中心、复旦大学附属…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023