精华内容
下载资源
问答
  • 用canvas绘制一个简易钟表 最近学习了如何用canvas绘制一个简易钟表,代码如下 用canvas绘制钟表

    最近学习了如何用canvas制作一个简易钟表,代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>用canvas绘制钟表</title>
        <style>
        #cv{
            border: 1px solid #333;
        }
        </style>
        <script>
        window.onload=function(){
            var cv=document.getElementById("cv");
            var ctx=cv.getContext("2d");
            setInterval(toDrawClock,1000)
            
          
            function toDrawClock(){
                var x=200;
                var y=200;
                var r=150;
                ctx.clearRect(0,0,cv.width,cv.height);
                
                // 获取本地时间
                var oDate=new Date();
                var oHours=oDate.getHours();
                var oMinutes=oDate.getMinutes();
                var oSeconds=oDate.getSeconds();
     
                // 计算当前时间对应的弧度
                var oHoursValue=(-90+oHours*30+oMinutes/2)*Math.PI/180;
                var oMinutesValue=(-90+oMinutes*6)*Math.PI/180;
                var oSecondsValue=(-90+oSeconds*6)*Math.PI/180;
     
                // 分针刻度,每6度一分钟
                ctx.beginPath();
                for(var i=0;i<60;i++){
                    ctx.moveTo(x, y);
                    ctx.arc(x, y, r, 6*i* Math.PI / 180, 6*(i+1) * Math.PI / 180);
                }
                ctx.closePath();
                ctx.stroke();
     
                ctx.fillStyle = "white";
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.arc(x, y, 19/20*r,0, 360 * Math.PI / 180);
                ctx.closePath();
                ctx.fill();
     
                // 时针刻度,每30度一小时
                ctx.beginPath();
                ctx.lineWidth=3;
                for(var i=0;i<12;i++){
                    ctx.moveTo(x, y);
                    ctx.arc(x, y, r, 30*i* Math.PI / 180, 30*(i+1) * Math.PI / 180);
                }
                ctx.closePath();
                ctx.stroke(); 
     
                ctx.fillStyle = "white"; 
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.arc(x, y, 18/20*r,0, 360 * Math.PI / 180);
                ctx.closePath();
                ctx.fill();
     
                // 绘制时针
                ctx.beginPath();
                ctx.lineWidth=6;
                ctx.moveTo(x, y);
                ctx.arc(x, y, 12/20*r,oHoursValue,oHoursValue);
                ctx.closePath();
                ctx.stroke();
                // 绘制分针
                ctx.beginPath();
                ctx.lineWidth=4;
                ctx.moveTo(x, y);
                ctx.arc(x, y, 16/20*r,oMinutesValue, oMinutesValue);
                ctx.closePath();
                ctx.stroke();
                // 绘制秒针
                ctx.beginPath();
                ctx.lineWidth=2;
                ctx.moveTo(x, y);
                ctx.arc(x, y, 18/20*r,oSecondsValue, oSecondsValue);
                ctx.closePath();
                ctx.stroke();
            }
            
     
        }
        </script>
    </head>
    <body>
      <div style="text-align: center;">
        <canvas id="cv" width="400px" height="400px">
        </canvas>
      </div>
        
    </body>
    </html>
    
    展开全文
  • 这里是一个简单的j2me钟表实现代码 自己的 大家可以参考一下
  • html5已经出来好长时间了,但仍然有不多小伙伴们不太懂,下面小编就来用html5实现一个简单钟表外观 #myCanvas{border:3px solid blue;} window.onload = function() { var mycanvas = document.getElementById(...

    html5已经出来好长时间了,但仍然有不多小伙伴们不太懂,下面小编就来用html5实现一个简单的钟表外观

    效果图

    20181027_5bd3f811ea3a8.png

    展开全文
  • canvas绘制一个简单钟表

    千次阅读 2018-03-17 11:55:24
    //创建一个2d空间 setInterval(Time,1000); //每隔一秒调用一次 function Time(){ var nowTime = new Date(); var nH = nowTime.getHours(); //获得当前小时 var nM = nowTime.getMinutes(); //获得当前分钟...

    css:

    <style>
            body{background: black}
            #c1{background: white;}
            span{color: white;}
    </style>



    html:

    <canvas id="c1" width="400" height="400">
        <span>不支持的浏览器</span>
        <!-- span标签里为不支持的浏览器可以看到的内容 -->
    </canvas>

    js:


    <script>
        var oC = document.getElementById("c1");  //获取到canvas元素
        var oGc = oC.getContext("2d");  //创建一个2d空间
    
        setInterval(Time,1000);  //每隔一秒调用一次
        function Time(){
            var nowTime = new Date();
            var nH = nowTime.getHours(); //获得当前小时
            var nM = nowTime.getMinutes(); //获得当前分钟数
            var nS = nowTime.getSeconds();//获得当前秒数
    
            oGc.clearRect(0,0,400,400); //结束绘制路径(闭合绘图),开始先清一遍防止重合越来越多
            oGc.beginPath(); //开始绘制路径(防止后面设置影响上面绘图)
            oGc.arc(200,200,150,0,360*Math.PI/180,false);  //PI是 π,false为顺时针 150为半径长度
    //    oGc.beginPath();  //加上外面的圆就不见了
            for(var i = 0; i < 60; i++){
                oGc.moveTo(200,200);  //将表中心移到画布的中心
                oGc.arc(200,200,150,i*6*Math.PI/180,i*6*Math.PI/180,false);//绘制圆,arc(x,y,半径,起始弧度,结束弧度,旋转方向),起始位置在3点钟位置,顺时针(默认:false)
            }
            //最外面一圈的圆
            oGc.stroke();  //画线,默认黑色
            oGc.beginPath();
            oGc.fillStyle = "#fff"; //填充颜色
            oGc.arc(200,200,150*19/20,0,360*Math.PI/180,false);
            oGc.fill();  //结束画线
            //12个小短线和里面的小小短线
            oGc.beginPath();
            oGc.lineWidth = "3";
            for(var i = 0;i<12;i++){
                oGc.moveTo(200,200);
                oGc.arc(200,200,150,i*30*Math.PI/180,i*30*Math.PI/180,false);
            }
            oGc.stroke();
            oGc.fillStyle = "#fff";
            oGc.arc(200,200,150*18/20,0,360*Math.PI/180,false);
            oGc.fill();
            //时针
            oGc.beginPath();
            oGc.lineWidth = "5";
            oGc.moveTo(200,200);
            oGc.arc(200,200,150*10/20,(nH*30+nM/2-90)*Math.PI/180,(nH*30+nM/2-90)*Math.PI/180,false);
            oGc.stroke();
            //分针
            oGc.beginPath();
            oGc.lineWidth = "5";
            oGc.moveTo(200,200);
            oGc.arc(200,200,150*13/20,(nM*6+nS/10-90)*Math.PI/180,(nM*6+nS/10-90)*Math.PI/180,false);
            oGc.stroke();
            //秒针
            oGc.beginPath();
            oGc.lineWidth = "5";
            oGc.moveTo(200,200);
            oGc.arc(200,200,150*16/20,(nS*6-90)*Math.PI/180,(nS*6-90)*Math.PI/180,false);
            oGc.stroke();
        }
    </script>
    

    样式:


    展开全文
  • 用基础图形做一个钟表 简述 利用Qpainter可以画出一些简单的图形,再将这些简单的图形组合,配合一些其他的函数和事件,就能实现一个基础的钟表。 效果图 代码实现 设置背景图片(此步骤可以省略,根据需要添加) ...

    用基础图形做一个钟表

    简述

    利用Qpainter可以画出一些简单的图形,再将这些简单的图形组合,配合一些其他的函数和事件,就能实现一个基础的钟表。

    效果图

    在这里插入图片描述

    代码实现

    1. 设置背景图片(此步骤可以省略,根据需要添加)
    //设置背景图片
        QPixmap map(":/rec/1_13.png");
        QRect q(0,0,1892,990);
        QRect q2(0,0,width(),height());
        painter.drawPixmap(q2,map,q);
    1. 设置窗口名称和图标
        setWindowTitle("clock");//窗口名称
        setWindowIcon(QIcon((":/rec/zhong.png")));//窗口图标
    1. 设置定时器,时间间隔为1000毫秒,并且将定时器时间与update函数关联为信号和槽,定时器每隔1秒发送一个信号,update接到信号后自动调用paintEvent事件。
        QTimer *timer1 = new QTimer(this);
        connect(timer1, SIGNAL(timeout()), this, SLOT(update()));
        timer1->start(1000);

    4.绘制时针分针秒针的形状

        // 时针、分针、秒针 - 多边形
        static const QPoint hourHand[3] = {
            QPoint(3, 8),
            QPoint(-3, 8),
            QPoint(0, -40)
        };
    
    
        static const QPoint minuteHand[3] = {
            QPoint(3, 8),
            QPoint(-3, 8),
            QPoint(0, -65)
        };
    
    
        static const QPoint secondHand[3] = {
            QPoint(3, 8),
            QPoint(-3, 8),
            QPoint(0, -80)
        };
    

    5.设置颜色(此步骤可以省略,根据需要添加)

     	QColor hourColor(130,57,53, 200);
       	QColor minuteColor(0, 127, 127, 150);
            QColor secondColor(0, 160, 230, 150);

    6.获取系统时间,平移坐标系

     	QTime time = QTime::currentTime();//获取系统时间
            painter.setRenderHint(QPainter::Antialiasing);
            painter.translate(width() / 2, height() / 2);// 平移坐标系原点至中心点
            painter.scale(qMin(width(), height())/ 200.0, qMin(width(), height())/ 200.0); // 缩放
            painter.drawEllipse(-96,-96,192,192);//画制边框圆

    7.绘制时针和时刻度线

         // 绘制时针
            painter.setPen(Qt::NoPen);
            painter.setBrush(hourColor);
            painter.save();
            painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));
            painter.drawConvexPolygon(hourHand, 3);
            painter.restore();
            painter.setPen(hourColor);
                // 绘制时刻度线
            for (int i = 0; i < 12; ++i)
            {
                painter.drawLine(88, 0, 96, 0);
                painter.rotate(30.0);
            }
            QFont font = painter.font();
            font.setBold(true);
            painter.setFont(font);

    8.绘制小时文本
    预先设置的接口:

    QRectF Widget::textRectF(double radius, int pointSize, double angle)
    {
        QRectF rectF;
        rectF.setX(radius*cos(angle*M_PI/180.0) - pointSize*2);
        rectF.setY(radius*sin(angle*M_PI/180.0) - pointSize/2.0);
        rectF.setWidth(pointSize*4);
        rectF.setHeight(pointSize*1.2);
        return rectF;
    }
     // 绘制小时文本
            int radius = 100;
            int pointSize = font.pointSize();
            int nHour = 0;
            for (int i = 0; i < 12; ++i)
            {
            	nHour = i + 3;
             	if (nHour > 12)
                       nHour -= 12;
                   painter.drawText(textRectF(radius*0.8, pointSize, i * 30), Qt::AlignCenter, QString::number(nHour));
             }

    9.绘制分针和分针刻度线

      // 绘制分针
            painter.setPen(Qt::NoPen);
            painter.setBrush(minuteColor);
            painter.save();
            painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
            painter.drawConvexPolygon(minuteHand, 3);
            painter.restore();
            painter.setPen(minuteColor);
                // 绘制分钟刻度线 
            for (int j = 0; j < 60; ++j)
            {
                if ((j % 5) != 0)
                    painter.drawLine(92, 0, 96, 0);
                painter.rotate(6.0);
            }

    10.绘制秒针

    // 绘制秒针
            painter.setPen(Qt::NoPen);
            painter.setBrush(secondColor);
            painter.save();
            painter.rotate(6.0 * time.second());
            painter.drawConvexPolygon(secondHand, 3);
            painter.restore();

    源代码

    头文件

    #ifndef CLOCK_H
    #define CLOCK_H
    #include <QWidget>
    
    
    QT_BEGIN_NAMESPACE
    namespace Ui { class Widget; }
    QT_END_NAMESPACE
    
    
    class Widget : public QWidget
    {
        Q_OBJECT
    
    
    public:
        Widget(QWidget *parent = nullptr);
        ~Widget();
        QRectF textRectF(double radius, int pointSize, double angle);
        void paintEvent(QPaintEvent *event);
    private:
        Ui::Widget *ui;
    };
    #endif // WIDGET_H
    
    

    cpp文件

    #include "widget.h"
    #include "ui_widget.h"
    #include <QTimer>
    #include <QTime>
    #include <QPainter>
    #include <QFont>
    #include <QPixmap>
    #include <QIcon>
    #define M_PI 3.1415926535898
    Widget::Widget(QWidget *parent)
        : QWidget(parent)
        , ui(new Ui::Widget)
    {
        ui->setupUi(this);
        setWindowTitle("clock");
        setWindowIcon(QIcon((":/rec/zhong.png")));//窗口图标
        QTimer *timer1 = new QTimer(this);
        connect(timer1, SIGNAL(timeout()), this, SLOT(update()));
        timer1->start(1000);
    }
    Widget::~Widget()
    {
        delete ui;
    }
    QRectF Widget::textRectF(double radius, int pointSize, double angle)
    {
        QRectF rectF;
        rectF.setX(radius*cos(angle*M_PI/180.0) - pointSize*2);
        rectF.setY(radius*sin(angle*M_PI/180.0) - pointSize/2.0);
        rectF.setWidth(pointSize*4);
        rectF.setHeight(pointSize*1.2);
        return rectF;
    }
    void Widget::paintEvent(QPaintEvent *event)
    {
     // 时针、分针、秒针 - 多边形
        static const QPoint hourHand[3] = {
            QPoint(3, 8),
            QPoint(-3, 8),
            QPoint(0, -40)
        };
    
    
        static const QPoint minuteHand[3] = {
            QPoint(3, 8),
            QPoint(-3, 8),
            QPoint(0, -65)
        };
    
    
        static const QPoint secondHand[3] = {
            QPoint(3, 8),
            QPoint(-3, 8),
            QPoint(0, -80)
        };
        QColor hourColor(130,57,53, 200);
        QColor minuteColor(0, 127, 127, 150);
        QColor secondColor(0, 160, 230, 150);
        QTime time = QTime::currentTime();//获取系统时间
        painter.setRenderHint(QPainter::Antialiasing);
        painter.translate(width() / 2, height() / 2);// 平移坐标系原点至中心点
        painter.scale(qMin(width(), height())/ 200.0, qMin(width(), height())/ 200.0); // 缩放
        painter.drawEllipse(-96,-96,192,192);//画制边框圆
         // 绘制时针
        painter.setPen(Qt::NoPen);
        painter.setBrush(hourColor);
        painter.save();
        painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));
        painter.drawConvexPolygon(hourHand, 3);
        painter.restore();
        painter.setPen(hourColor);
                // 绘制时刻度线
        for (int i = 0; i < 12; ++i)
        {
            painter.drawLine(88, 0, 96, 0);
            painter.rotate(30.0);
         }
         QFont font = painter.font();
         font.setBold(true);
         painter.setFont(font);
         // 绘制小时文本
         int radius = 100;
         int pointSize = font.pointSize();
         int nHour = 0;
         for (int i = 0; i < 12; ++i)
         {
         	nHour = i + 3;
            if (nHour > 12)
            	nHour -= 12;
          	painter.drawText(textRectF(radius*0.8, pointSize, i * 30), Qt::AlignCenter, QString::number(nHour));
         }
               // 绘制分针
         painter.setPen(Qt::NoPen);
         painter.setBrush(minuteColor);
         painter.save();
         painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
         painter.drawConvexPolygon(minuteHand, 3);
         painter.restore();
         painter.setPen(minuteColor);
                // 绘制分钟刻度线
         for (int j = 0; j < 60; ++j)
         {
         	if ((j % 5) != 0)
            	painter.drawLine(92, 0, 96, 0);
            painter.rotate(6.0);
         }
                // 绘制秒针
         painter.setPen(Qt::NoPen);
         painter.setBrush(secondColor);
         painter.save();
         painter.rotate(6.0 * time.second());
         painter.drawConvexPolygon(secondHand, 3);
         painter.restore();
    }
    展开全文
  • 简单绘制一个钟表

    2017-06-20 11:07:58
    先试试手,从用android的*Canvas*绘制一个钟表开始着手吧! 这里我当时并没有将其自定义成控件而是直接画一个bitmap; 先上代码 private Bitmap drawClockFace() { width = 500; height = 500;
  • JS提供了Date类型来处理时间和日期。Date类型内置一系列获取和设置日期时间信息的方法。下面我们简单的 概述一下这个Date类型。  大概看了一下Date类型的方法,下面给出: ...//创建一个时间日期对象 document.writ
  • 4.用QTimer设定时间,使钟表一秒钟刷新次。 代码分享 dialog.h #ifndef DIALOG_H #define DIALOG_H #include <QDialog> #include<QPen> QT_BEGIN_NAMESPACE namespace Ui { class Dialog; } QT_END_
  • html5已经出来好长时间了,但仍然有不多小伙伴们不太懂,下面小编就来用html5实现一个简单钟表外观#myCanvas{border:3px solid blue;}window.onload = function(){var mycanvas = document.getElementById(...
  • Java实现一个简易钟表

    千次阅读 2014-07-14 16:31:11
    package com.diyitian.zaiyixun; import java.awt.Graphics; import java.util.Calendar; import java.util.GregorianCalendar; import javax.swing.JFrame; import javax.swing.JPanel;...public class TimeTest ex
  • 制作一个钟表

    2019-11-09 17:23:49
    用EasyX制作的一个简易钟表,需设置字符集属性为多字节字符集。 #include<stdio.h> #include<graphics.h> #include<math.h> #include<stdlib.h> #define width 900 //屏幕的宽 #define ...
  • 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas对象 canvas对象本人也不是很熟,大致看了几个常用的方法,难免有不足之处,仅是练习所用。 实现思路:画表盘,画刻度,画表针就是这么个...
  •  第一次看到别人的程序上面一个钟表自动走动感觉好神奇,好厉害的样子,然后就很感兴趣,自己鼓捣了一通,也明白了,理清思路其实很简单,下面来和大家一起分享一下我的思路.  首先确定一个圆心点和半径画一个圆,这个...
  • iOS实现简易钟表

    2020-08-25 00:42:45
    主要为大家详细介绍了iOS实现简易钟表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • C#写的一个钟表

    2012-01-13 18:09:16
    一个非常简单钟表,就是窗体画的不圆,这个不知道怎么解决
  • C#简单钟表

    2011-11-29 14:19:03
    是用C#写的一个简单钟表
  • endmodule 时分秒分开写的,以为这样理解起来简单。至于为什么用同步复位,异步复位时序不对,同步复位时序对了,就这样,题面里没有说明白,答案是这样。 人家写的: module top_module ( input clk, input reset,...
  • 此附件为一个旋转的钟表。代码简单,下载即可使用,无需应用额外的css 和js ,兼容性好。
  • 【实例简介】JAVA一个钟表日历提醒等功能的系统。很简单的应用希望对你有帮助【实例截图】【核心代码】3901295e-9086-4662-ae0c-8c3922f0a8b9└── Demo├── 1841_9531.jpg├── Arrange.class├── ...
  • 用js和html5 canvas对象实现一个简单钟表程序主要用到的就是h5的canvas对象canvas对象本人也不是很熟,大致看了几个常用的方法,难免有不足之处,仅是练习所用。实现思路:画表盘,画刻度,画表针就是这么个思路。...
  • VC++MFC简易钟表

    2010-03-15 18:07:54
    用VC MFC钟表,比较简单,可用于学习参考
  • 于是我就产生一个想法:用Graphics来模拟一个会走的钟表。 先写一个Time方法,通过timer1_Tick事件来调用该方法。 我在窗体上放置了一个label来比较时钟时间是否正确。 //定义全局变量 。mcount用来计算一分钟的...
  • canvas 画一个钟表

    2017-09-06 02:32:00
    首先说下思路,将一个圆分成12份表盘,然后用lineTo等方法话指针,最后用一个setInterval刷新画布,让指针每隔一秒动一下。 js代码如下: window.onload = function () { var canvas = document.getElem...
  • 不是很好,只是很简单的,交流一下,只有一个指针,对与学习重绘有点帮助
  • public partial class Form1 : Form { public Form1() { InitializeComponent(); } private PictureBox pictureBox1 = new PictureBox(); private Timer
  • 制作简单钟表

    2019-10-01 19:02:57
    html部分比较简单,定义一个clock的div,内部有原点、时分秒针、日期以及时间,至于钟表上的刻度、数字等元素,因为量比较多,采用jvascript生成 1 <!doctype html> 2 <html> 3...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,266
精华内容 2,506
关键字:

做一个简单的钟表