正文 

当前位置： 首页 > java > java教程

canvas基础绘制-倒计时(上)

喵嘻嘻 喵嘻嘻     2022-09-19     144

关键词：

 

效果：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>digit</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="digit_1.js"></script>
<script src="countdown.js"></script>
</body>
</html>

countdown.js:

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

const endTime = new Date(2017,8,17,18,30,00);//const声明变量，不可修改，必须声明时赋值；
var curShowTimeSeconds = 0;

window.onload = function () {

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    curShowTimeSeconds = getCurrentShowTimeSeconds();
    setInterval(
        function () {
            update();
            render(context);
    },50)

};

function getCurrentShowTimeSeconds() {
    var curTime = new Date();//获取目前时间；
    var ret = endTime.getTime()-curTime.getTime();
    ret = Math.round(ret/1000);//获取秒数差值；
    return ret>=0?ret:0;
}

function update() {

    var nextShowTimeSeconds = getCurrentShowTimeSeconds();

    var nextHours = parseInt(nextShowTimeSeconds/3600);
    var nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);
    var nextSeconds = nextShowTimeSeconds%60;

    var curHours = parseInt(curShowTimeSeconds/3600);
    var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60);
    var curSeconds = curShowTimeSeconds%60;

    if(nextSeconds!=curSeconds){
        curShowTimeSeconds = nextShowTimeSeconds;
    }
}
function render(cxt) {
    //每一帧都要对动画进行刷新，不然就会新的旧的叠在一起；
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//对一个矩形空间里的动画进行刷新；

    var hours = parseInt(curShowTimeSeconds/3600);
    var minutes = parseInt((curShowTimeSeconds-hours*3600)/60);
    var seconds = curShowTimeSeconds%60;

    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);
}

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();
            }
        }
    }
}

 

canvas基础绘制-倒计时(下)

digit_1.js: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], 查看详情

canvas基础绘制-绚丽时钟

效果图：与canvas基础绘制-绚丽倒计时的代码差异：//varendTime=newDate();//const声明变量，不可修改，必须声明时赋值；//endTime.setTime(endTime.getTime()+3600*1000);//当前时间向后一小时；varcurShowTimeSeconds=0;functiongetCurrentShowTimeSeconds(){varcur 查看详情

炫丽的倒计时效果canvas绘图与动画基础(代码片段)

前言想要在自己做的网页中，加入canvas动画效果，但是发现模板各种调整不好，觉得还是要对canvas有所了解，才可以让自己的网页变得狂拽炫酷吊炸天！一、绘制基础1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8"&... 查看详情

更新——canvas画布动画效果之实现倒计时

...anvas画布的基础部分，以及实现了一个由7*10点阵图显示的倒计时的基本架构。上次的效果如下图所示，仅仅只是一个时间的静态显示而已：今天呢，小W想实现就是，让它开始倒计时！效果先给大家看一下：Canvas画布用于图形的... 查看详情

android绘图基础--canvas和drawable

参考技术AGithub链接画2D图形有两种方法：Canvas实际上是封装了各种draw方法的类，调用draw方法把图形绘制到底层的Surface上，即绘制在Window上。这个例子中构造了两个Canvas和一个Bitmap，分别调用其draw方法，先是mCanvas往Bitmap里绘制... 查看详情

canvas画布基础知识

<canvas></canvas>标签用于绘制图像（通过脚本，通常是JavaScript）。<canvas>元素本身并没有绘制能力（它仅仅是图形的容器）-您必须使用脚本来完成实际的绘图任务。getContext()方法可返回一个对象，该对象提供了用于在... 查看详情

图形基础篇02#指令式绘图系统：如何用canvas绘制层次关系图？(代码片段)

说明【跟月影学可视化】学习笔记。如何用Canvas绘制几何图形？1.Canvas元素和2D上下文Canvas元素上的width和height属性不等同于Canvas元素的CSS样式的属性。这样分开能更方便地适配不同的显示设备。CSS属性中的宽高影响Canvas在页... 查看详情

canvas的基础学习(代码片段)

1、创建canvas<canvasid="canvas"></canvas>varcanvas=document.getElementById(‘canvas‘)varcontext=canvas.getContext(‘2d‘)使用context进行绘制2、线可以设置的状态:(1)context.lineWidth(2)context.strokeStyle(3)context.fillStyle(4)context.lineCap=butt|round|square(5)line... 查看详情

tips——canvas闪屏问题的处理(代码片段)

...冲理论：闪烁是图形编程的一个常见问题。需要多重复杂绘制操作的图形操作会导致呈现的图像闪烁或具有其他不可接受的外观。双缓冲的使用解决这些问题。双缓冲使用内存缓冲区来解决由多重绘制操作造成的闪烁问题。当启... 查看详情

canvas基础(代码片段)

title:Canvas基础date:2016-11-09tags:HTML50x00Canvas使用Canvas元素必须为其设置宽度和高度属性，指定可以绘制区域的大小。如果不添加任何样式或者不绘制任何图形，那么是看不到该元素的。但是若是通过CSS样式来为其设置宽高属性的话... 查看详情

android绘图之canvas基础（2）

参考技术ACanvas画布，用于绘制出各种形状配合画布的变幻操作可以绘制出很多复杂图形，基本的绘制图形分类。提供的绘制函数：上面四个函数都可以绘制canvas的背景，注意到PorterDuff.Mode变量，它只对两个canvas绘制bitmap起作用... 查看详情

炫丽的倒计时效果canvas绘图与动画基础

digit.js1digit=[2[3//04[0,0,1,1,1,0,0],5[0,1,1,0,1,1,0],6[1,1,0,0,0,1,1],7[1,1,0,0,0,1,1],8[1,1,0,0,0,1,1],9[1,1,0,0,0,1,1],10[1,1,0,0,0,1,1],11[1,1,0,0,0,1,1],12[0,1,1,0,1,1,0],13[0,0,1,1,1,0,0]14],1 查看详情

canvas基础绘制-arc

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>arc</title></head><body><canvasid="canvas"style="border:1pxsolid#ddd;"></canvas& 查看详情

关于html5canvas的基础教程

HTML5规范引进了很多新特性，其中最令人期待的之一就是 canvas元素。HTML5 canvas提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas元素都有一个”上下文(context)”(想象成绘图板上的一页... 查看详情

canvas基础

绘制矩形的四种方式:1.手动绘制2.使用canvas提供的绘制矩形API,ctx.rect(x,y,width,height);ctx.stroke();参数分别表示,x轴坐标,y轴坐标,矩形宽度,矩形高度3.ctx.strokeRect(x,y,width,height);参数同上4.ctx.strokeRect(x,y,width,height);参数同上第3,4种方法只... 查看详情

html5之canvas基础

<scripttype="text/javascript">varcanvasDom=document.getElementById("demoCanvas");//获取canvas元素varcontext=canvasDom.getContext("2d");//获取canvas的context对象，一切操作都是在context对象上完成的//////绘制不填充矩形//context 查看详情

自定义控件paint，canvas基础用法-drawbitmap()，drawtext()详解(代码片段)

本篇博客继续学习Paint和Canvas的基础用法，上一篇博客学习了基础API使用（基础几何图形，Path路径），接下来学习绘制文本和绘制图片上一篇文章，没看的有必要先了解一下：自定义控件（一）... 查看详情

如何在 Flutter 的 Canvas 上绘制 Widget？

】如何在Flutter的Canvas上绘制Widget？【英文标题】：HowcanIpaintaWidgetonaCanvasinFlutter?【发布时间】：2020-09-0322:03:14【问题描述】：有没有办法在Canvas的给定位置绘制Widget？更具体地说，我想在实际FlutterMap小部件前面的单独Canvas上绘... 查看详情