【Canvas与钟表】淡紫色X纹表盘

于 2024-09-19 11:29:52 发布
阅读量1k 收藏 11
点赞数 16
分类专栏： 钟表 文章标签： canvas 表盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/river_sun/article/details/142355896
版权

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>淡紫色X纹表盘</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>
        </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.save();
        ctx.fillStyle = "white";//"rgb(117,117,117)";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();

        const R=180;// 基准尺寸

        // 横向渐变宽外框
        ctx.save();
        var r=R*1.06;
        var gnt=ctx.createLinearGradient(-r,0,r,0);
        gnt.addColorStop(0,"rgb(80,45,25)");
        gnt.addColorStop(0.4,"rgb(212,192,155)");
        gnt.addColorStop(0.5,"rgb(242,234,221)");
        gnt.addColorStop(0.6,"rgb(212,192,155)");
        gnt.addColorStop(1,"rgb(80,45,25)");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 横向渐变窄外框
        ctx.save();
        var r=R*1.02;
        var gnt=ctx.createLinearGradient(0,-r,0,r);//(-r,0,r,0);
        gnt.addColorStop(0,"rgb(104,77,50)");
        gnt.addColorStop(0.4,"rgb(169,145,117)");
        gnt.addColorStop(0.5,"rgb(129,102,73)");
        gnt.addColorStop(0.6,"rgb(169,145,117)");
        gnt.addColorStop(1,"rgb(104,77,50)");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 表盘
        ctx.save();
        var r=R*1.00;
        ctx.fillStyle="black";
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 刻度
        r=R;
        var N=240;
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;

            var rad1=0;
            var rad2=0;            
            if(i%5!=0){                
                rad1=r/20*19;
                rad2=r/20*18;
            }else{                
                rad1=r/20*19.8;
                rad2=r/20*18;
            }

            var pt=createPt(rad1*Math.cos(theta),rad1*Math.sin(theta));
            var pt2=createPt(rad2*Math.cos(theta),rad2*Math.sin(theta));
                
            ctx.strokeStyle="rgb(173,169,166)";
            ctx.beginPath();
            ctx.moveTo(pt.x,pt.y);
            ctx.lineTo(pt2.x,pt2.y);
            ctx.stroke();            
        }

        // backslash表盘
        ctx.save();
        var r=R*0.9;
        var gnt=ctx.createLinearGradient(-r,r,r,-r);
        gnt.addColorStop(0,"black");
        gnt.addColorStop(0.4,"rgb(125,115,116)");
        gnt.addColorStop(0.5,"rgb(155,147,144)");
        gnt.addColorStop(0.6,"rgb(125,115,116)");
        gnt.addColorStop(1,"black");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // slash蒙版
        ctx.save();
        r=R*0.9;
        var gnt=ctx.createLinearGradient(-r,-r,r,r);
        gnt.addColorStop(0,"rgba(0,0,0,0.35)");
        gnt.addColorStop(0.4,"rgba(125,115,116,0.35)");
        gnt.addColorStop(0.5,"rgba(155,147,144,0.35)");
        gnt.addColorStop(0.6,"rgba(125,115,116,0.35)");
        gnt.addColorStop(1,"rgba(0,0,0,0.35)");
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 圆点刻度
        ctx.save();
        r=R*0.85;
        var N=60;
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;
            var pt=createPt(r*Math.cos(theta),r*Math.sin(theta));

            if(i%5==0){
                var bgColor=ctx.createRadialGradient(pt.x,pt.y,0,pt.x,pt.y,4);
                bgColor.addColorStop(0,"white");
                bgColor.addColorStop(0.5,"rgb(212,192,155)");
                bgColor.addColorStop(1,"black");
                drawSolidCircle(ctx,pt.x,pt.y,4,bgColor);
            }else{
                var bgColor=ctx.createRadialGradient(pt.x,pt.y,0,pt.x,pt.y,1);
                bgColor.addColorStop(0,"white");
                bgColor.addColorStop(0.5,"rgb(212,192,155)");
                bgColor.addColorStop(1,"lightgrey");
                drawSolidCircle(ctx,pt.x,pt.y,1,bgColor);
            }
        }
        ctx.restore();

        // 数字
        ctx.save();                
        r=R*0.75;
        var hours=["Ⅲ","Ⅵ","Ⅸ","Ⅻ"]; 
        var N=hours.length;
        for(var i=0;i<N;i++){
            var theta=i*Math.PI*2/N;
            var pt=createPt(r*Math.cos(theta),r*Math.sin(theta));

            ctx.font=r/8+"px Microsoft YaHei UI";
            ctx.textAlign="center";
            ctx.textBaseLine="Middle";
            ctx.fillStyle="rgb(212,192,155)";
            ctx.fillText(hours[i],pt.x,pt.y+r/20);
        }
        ctx.restore();

        // 文字
        var color="rgb(232,212,175)";
        var start=createPt(0,R/3);
        var gap=24;
        var sz=R/10;
        //writeText(ctx,start.x,start.y,"Time is fleeting",sz+"px Ink Free",color);
        //writeText(ctx,start.x,start.y+gap,"往事只能回味",sz+"px 汉仪瘦金体繁",color);
        
        // 得到当前时间
        var now=new Date();
        var s=now.getSeconds();
        var m=now.getMinutes();
        var h=now.getHours()+m/60;

        // 画三根针        
        drawHourPointer(ctx,h,R*0.6);
        drawMinutePointer(ctx,m,R*0.7);
        drawSecondPointer(ctx,s,R*0.8);

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

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

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

    ctx.strokeStyle="grey";
    var gnt=ctx.createLinearGradient(0,-W/2,0,0);
    gnt.addColorStop(0,"rgb(176,138,117)");
    gnt.addColorStop(0.5,"rgb(240,226,119)");
    gnt.addColorStop(1,"rgb(143,105,58)");
    ctx.fillStyle=gnt;
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.quadraticCurveTo(R/3,-W/2,R,0);
    ctx.closePath();    
    ctx.fill();
    ctx.stroke();

    ctx.strokeStyle="lightgrey";
    var gnt=ctx.createLinearGradient(0,W/2,0,0);
    gnt.addColorStop(0,"rgb(143,105,58)");
    gnt.addColorStop(0.5,"rgb(240,226,119)");
    gnt.addColorStop(1,"rgb(111,77,29)");
    ctx.fillStyle=gnt;
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.quadraticCurveTo(R/3,W/2,R,0);
    ctx.closePath();    
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

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

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

    ctx.strokeStyle="grey";
    var gnt=ctx.createLinearGradient(0,-W/2,0,0);
    gnt.addColorStop(0,"rgb(176,138,117)");
    gnt.addColorStop(0.5,"rgb(240,226,119)");
    gnt.addColorStop(1,"rgb(143,105,58)");
    ctx.fillStyle=gnt;
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.quadraticCurveTo(R/3,-W/2,R,0);
    ctx.closePath();    
    ctx.fill();
    ctx.stroke();

    ctx.strokeStyle="lightgrey";
    var gnt=ctx.createLinearGradient(0,W/2,0,0);
    gnt.addColorStop(0,"rgb(143,105,58)");
    gnt.addColorStop(0.5,"rgb(240,226,119)");
    gnt.addColorStop(1,"rgb(111,77,29)");
    ctx.fillStyle=gnt;
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.quadraticCurveTo(R/3,W/2,R,0);
    ctx.closePath();    
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

// 画秒针
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(239,201,136)";
    ctx.beginPath();
    ctx.arc(0,0,1.5*W,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();

    // 红色表针
    ctx.strokeStyle="rgb(239,201,136)";
    ctx.lineWidth=2;
    ctx.beginPath();
    ctx.moveTo(-R/8,0);
    ctx.lineTo(R,0);
    ctx.stroke();

    // 红圈
    ctx.fillStyle="rgb(239,201,136)";
    ctx.beginPath();
    ctx.arc(0,0,1.2*W,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();

    // 金点
    ctx.fillStyle="white";
    ctx.beginPath();
    ctx.arc(0,0,0.8*W,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();
}

/*-------------------------------------------------------------
逝者如斯夫不舍昼夜
时光容易把人抛红了樱桃绿了芭蕉
人生如白驹过隙转瞬即逝
时光一去不复回往事只能回味
--------------------------------------------------------------*/
//-->
</script>

END

普兰店拉马努金
关注
专栏目录
Canvas---Canvas绘制钟表，仪表盘
MIKUScallion的专栏
01-29 6573
Canvas绘制钟表，仪表盘。 《HTML5 Canvas核心技术》这本书在代码方面，没有丝毫注解，我感觉看的挺费劲，如果你想买书的话，最好还是先下本pdf看看吧。 下面是表盘的绘制图解 函数顺序是按照上图的顺序来写的，最后我为仪表加上了样式。 源代码： canvas{ bord
【Canvas与钟表】彩虹表盘罗马字版
一念非凡(46岁待业程序员)
09-06 1175
用Html5/Canavs绘制彩虹钟表。
基于Canvas的Html5多时区动态时钟实战
夜郎King的博客
07-02 4854
本文以Canvas为基础，支持多时区的多时钟的动态Web展示为例实现一种在Html5上的电子钟展示方法。通过本文可以了解Canvas的详细用法，掌握基本的文本绘制、样式控制、属性管理的基本知识。
99 Three.js使用canvas更新纹理
现在学习也不晚
05-10 7212
案例查看地址： 简介 Three.js可以直接将canvas画布上的图像作为纹理绘制到模型上面。下面我们说一下如何实现 案例实现 首先，我们创建了一个canvas对象，并使用js在上面循环绘制图像。在上面绘制了一个火在燃烧的动画。 &amp;lt;canvas id=&quot;surface&quot;&amp;gt;&amp;lt;/canvas&amp;gt; 然后我们获取到canvas的dom对象，通过do...
纯JS+Vue和canvas实现一个仪表盘
菜就多练
07-31 3499
【代码】纯JS+Vue实现一个仪表盘。
canvas绘制时钟表盘
djz917的博客
06-08 2071
关于canvas的API操作详情请阅读文档https://www.runoob.com/html/html5-canvas.html先来看下效果图：首先，需要绘制两个圆形作为表盘var drawing=document.getElementById("drawing"); var context=drawing.getContext("2d"); context.beginPath(); //绘...
canvas绘制简易百分比仪表盘dashboard
小记心得
06-27 4996
由于最近工作中，经常会遇到一些动态百分比的仪表盘，一开始都是用图片样式方式实现； 但是随着越来越多的项目，决定用canvas绘制一个简易的仪表盘，便于以后项目中直接使用； 现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。 简简单单而已，以下直接给出代码： canvas绘制简易百分比仪表盘dash
微信小程序Canvas自绘图表之 仪表图（表盘）
灵神翁的博客
07-22 4978
微信小程序Canvas自绘图表之 仪表图（表盘） 大家好，我是梦辛工作室的灵，最近在开始画仪表图，一如既往的先看实现图： 实现代码如下： function drawCircle(item, that) { let width = that.data.width * 0.7; let height = that.data.width * 0.7; let centerPoint = { x: width / 2, y: height / 2 } let ctx =
Canvas的初识——模拟表盘数字绘制
事情往往烟消云散
08-29 3097
看了题目，大家都该知道，我今天想说些什么了，是的，我今天想说说Canvas这个android中的让人摸不着头脑的元素，对于Canvas很多人都知道他就是用来画东西的，其他的也没啥用，是啊，说的没错，它就是用来画东西的，可能刚接触android的童鞋们不了解，但是有一定时间开发经验的小伙伴们都知道，Canvas是走进android高级开发道路上必不可少的，那么它究竟有什么地方让我们这么捉摸不透呢？下面
canvas如何绘制钟表的方法
12-14
本文介绍了canvas如何绘制钟表的方法，分享给大家，具体如下： 效果图为 上代码： var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var year,month,day,hour,second,minute;...
canvas 二 canvas绘制表盘，及canvas曲线的绘制
凯子的专栏
05-06 1971
/** * 绘制圆 * arc(x,y,半径,起始弧度，结束弧度,旋转方向) * x,y起始位置 * 弧度与角度的关系 : 弧度 = 角度*Math.PI/180 * 旋转方向:顺时针(默认false)、逆时针(true) */ var oc = document.getElementById('canvas'); var ogc = oc.getContext('2d')
如何避免 Canvas 指纹识别
m0_67768117的博客
04-10 3004
如何避免 Canvas 指纹识别：1、禁用硬件加速功能；2、使用Adspower指纹浏览器
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功
10-10
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功功率可达10kW或10kVar，甚至更高
SpringBoot+Vue工厂生产设备维护管理系统答辩PPT.ppt
10-10
计算机毕业设计答辩PPT
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
最新发布
10-10
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
CCS软件之工程模板的创建
10-10
工程模板创建的基础文件
nmpc非线性模型预测控制从原理到代码实践 含4个案例 自动泊车轨迹优化； 倒立摆上翻控制； 车辆运动学轨迹跟踪； 四旋翼无人机
10-10
nmpc非线性模型预测控制从原理到代码实践 含4个案例 自动泊车轨迹优化； 倒立摆上翻控制； 车辆运动学轨迹跟踪； 四旋翼无人机轨迹跟踪。
SpringBoot+Vue多媒体素材管理系统答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值