【canvas】绘制一个数字时钟

使用canvas绘制一个数字时钟

基础内容

下面是此案例中会使用到的一些绘图API

//获取绘图上下文
var ctx = canvas.getContext(‘2d‘);

//绘制直线
ctx.moveTo(100, 100);
ctx.lineTo(700, 700);

//绘制曲线
ctx.arc(
centerx, centery, radius, //圆心的坐标以及半径的值
startingAngle,endingAngle, //从哪个弧度制开始到那个弧度值结束
anticlockwise=false //顺时针还是逆时针，默认是顺时针false
)

//控制样式
ctx.lineWidth = 5;
ctx.strokeStyle = ‘blue‘;
ctx.fillStyle = ‘blue‘;

//绘制路径
ctx.stroke();
//填充
ctx.fill();

//开启路径
ctx.beginPath();
//结束路径
ctx.closePath();

//清除canvas的某块区域
ctx.clearRect(x,y,width,height)

代码部分

html

<!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>Document</title>
  <style>
    * {
      margin: 0;
    }
    #canvas {
      margin: 0 auto;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="./digit.js"></script>
  <script src="./countdown.js"></script>
</body>
</html>

js部分

var WINDOW_WIDTH = 1024; // 屏幕宽度
var WINDOW_HEIGHT = 600; // 屏幕高度
var RADIUS = 8; //半径
var MARGIN_TOP = 60; //起始位置Y
var MARGIN_LEFT = 30; //起始位置X

var balls = []; // 记录小球
var colors = [‘red‘, ‘yellow‘, ‘#000‘, ‘#453‘]

var date = new Date();
var nowhours = date.getHours(),
  nowminutes = date.getMinutes(),
  nowseconds = date.getSeconds();

//渲染
function render(cxt) {
  //刷新之前的canvas
  cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
  var date = new Date();
  var hours = nowhours,
    minutes = nowminutes,
    seconds = nowseconds;

  //渲染点阵
  renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
  renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
  renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
  renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
  renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
  renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);
  renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
  renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);

  // 渲染运动的小球
  for (var i = 0; i < balls.length; i++) {
    cxt.fillStyle = balls[i].color;
    cxt.beginPath();
    cxt.arc(balls[i].x,balls[i].y, RADIUS, 0, 2 * Math.PI)
    cxt.closePath()
    cxt.fill()
  }
}

//点阵的转换
function renderDigit(x, y, num, cxt) {
  cxt.fillStyle = "rgb(0,102,153)";
  for (var i = 0; i < digit[num].length; i++)
    for (var j = 0; j < digit[num][i].length; j++)
      if (digit[num][i][j] == 1) {
        cxt.beginPath();
        cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
        cxt.closePath()
        cxt.fill()
      }
}

//添加小球
function addBalls(x, y, num) {
  for (var i = 0; i < digit[num].length; i++) {
    for (var j = 0; j < digit[num][i].length; j++) {
      if (digit[num][i][j] == 1) {
        //添加球
        var aBall = {
          x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
          y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
          g: 1.5 + Math.random(),
          vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4, //让小球的速度多元化
          vy: 0,
          color: colors[Math.floor(Math.random() * colors.length)]
        }
        balls.push(aBall);
      }
    }
  }
  //性能优化，清除不符合条件的小球
  balls = balls.filter((item)=>{
    return item.x+RADIUS > 0 && item.x-RADIUS<WINDOW_WIDTH
  })

  // var cnt = 0;
  // for (var i = 0; i < balls.length; i++) {
  //   if (balls[i].x+RADIUS > 0 && balls[i].x-RADIUS<WINDOW_WIDTH) {
  //     balls[cnt++] = balls[i]
  //   }
  // }
  // while(balls.length > Math.min(300,cnt)) {
  //   balls.pop();
  // }
  // console.log(balls.length)
}
//更新小球变化
function updataBalls() {
  for (var i = 0; i < balls.length; i++) {
    balls[i].x += balls[i].vx;
    balls[i].y += balls[i].vy;
    balls[i].vy += balls[i].g;
    if (balls[i].y >= WINDOW_HEIGHT - RADIUS) {
      balls[i].y = WINDOW_HEIGHT - RADIUS;
      balls[i].vy = -balls[i].vy * 0.5;
    }
  }
}

function updata() {
  var seconds = new Date().getSeconds();
  if (seconds != nowseconds) {
    // 添加球
    addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10))
    nowseconds = seconds;
  }
  //更新球的变化
  updataBalls();
}

window.onload = function () {
  //自适应
  WINDOW_WIDTH = document.documentElement.clientWidth;
  WINDOW_HEIGHT = document.documentElement.clientHeight;
  MARGIN_LEFT = WINDOW_WIDTH/10;
  RADIUS =  Math.round(WINDOW_WIDTH*4/5/108)-1;
  var canvas = document.getElementById(‘canvas‘);
  var context = canvas.getContext("2d");
  canvas.width = WINDOW_WIDTH;
  canvas.height = WINDOW_HEIGHT;

  setInterval(function () {
    //渲染
    render(context);
    //更新
    updata();
  }, 100);
}

点阵图

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

原文地址：https://www.cnblogs.com/Ingots/p/11615474.html

时间： 2024-11-08 03:04:16

【canvas】绘制一个数字时钟的相关文章

用canvas绘制一个简易时钟

在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数字三部分. 2.表盘是个圆,这个简单. 3.绘制指针时,需要先获取到系统时间,然后找到时间和角度的关系. 4.然后利用画圆函数,把起始和终点设为同一角度,即可画出射线(指针). 二. 接下来,我们再分析一下,绘制时钟需要用到的函数. 1.arc(x, y, r, start, stop) x, y

通过HTML5标签canvas绘制一个八卦图案

只需要用到casvas标签和fillStyle.arc.beginPath.closePath.fill方法代码如下: <canvas id="rect" width="310" height="310" style="border:1px yellow solid;"> </canvas> <script> var id=document.getElementById("rec

利用canvas画一个动态时钟

目标:利用canvas画布画一个动态时钟,根据目前的时间可以实时更新的,可以在过程中添加一些效果,比如让时钟外围的一圈颜色渐变,时钟上的数字颜色改变,时钟的指针颜色改变... 设置一个定时器先放上一张效果图,参考一下先建一个画布,写好样式 <style type="text/css"> *{ margin: 0; padding: 0; } div{ //设置div的text-align为center,margin-top text-align: center; mar

HTML5 在canvas绘制一个矩形

笔者:本笃庆军原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增.y坐标向下递增. 使用画图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) :

用canvas绘制一个时钟

实现一个时钟的绘制和时间的显示一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时钟</title> <style type="text/css">

canvas 画一个小时钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <canvas id="mycanvas" height="1000" width="1000"></ca

用Canvas绘制一个钟表

效果图: <html> <head></head><body> <canvas id="canvas1"height="500px"width="500px">您的浏览器不支持canvas标签.</canvas> <script> var c=document.getElementById("canvas1"); var clock=c.get

canvas绘制国旗样式

今天绘制的是国旗: 代码如下: <html><head> <script> var col=new Array("red","brown"); var ticker=0; var step=0; function drawBackground(){ var g=document.getElementById("background").getContext("2d"); var grd=g.

桌面小控件的实例-----数字时钟

为了实现一个数字时钟的桌面组件,开发者需要在程序界面上定义8个ImageView,其中6个ImageView用于显示小时.分钟.秒钟的数字,另外两个ImageView用于显示小时.分钟.秒钟之间的冒号. 为了让桌面组件实时的显示当前时间,程序需要每个1秒更新一次程序界面上的6个ImageView,让它们显示当前小时.分钟.秒钟的数字即可. import java.text.SimpleDateFormat;import java.util.Date;import java.util.Timer;