HTML5下canvas 制作绚丽钟表例子

html5之canvas的标签的使用，废话不多说，直接上代码：

html部分：

<body>
 <canvas   id="canvas">
  浏览器不支持CANVAS
 </canvas>
</body>

不用怀疑，就是这么简单，在html里面，好玩的在js里面

第一个辅助代码部分，仅仅只是标注0-9 十个数字和一个“：”号，这样，一个电子钟表的所有元素都有了：

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]
        ]//:
    ];

下面就是核心JS代码了，具体讲解就不说了，几个基本函数的使用，不会去度娘，或者使用下方(企鹅:281284520)的联系方式联系本人，容我一一为你讲解！代码：

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;

//www.111cn.net
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
 
window.onload = function(){
 
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");
 
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
 
    render( context )
}
 
function render( cxt ){
 
    var hours = 12
    var minutes = 34
    var seconds = 56
 
    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()
            }
}
就这样，代码都贴上来了，勇敢在你的爱机上面跑起来吧，其实，本人也正在研究Html5+css3，欢迎前辈指导、同辈交流

时间： 2024-10-27 16:01:37

HTML5下canvas 制作绚丽钟表例子的相关文章

html5 anvas-html5 Canvas制作马赛克块数问题和加载速度问题

问题描述 html5 Canvas制作马赛克块数问题和加载速度问题 这两天在看canvas 今天照着课本敲了下马赛克的代码. 以下是主要代码 var imageData = context.createImageData(500,500); var pixels = imageData.data; //马赛克的块的个数 **//个数如果为2的平方数显示会比较好,但是32为什么不好?加载也比较慢** var numTileRows = 32; var numTileCols = 32; //每个块

html5利用Canvas的绘图的例子

对于Canvas绘图,可以使用toDataURL()方法保存绘出的图像,然后在提供给object元素二次使用. <p>Canvas绘图</p> <canvas id="mycanvas" width="300" height="150"></canvas> <p>还原绘图</p> <object type="image/png" id="m

html5中canvas 圆周运动和椭圆运动例子

一. 圆周运动 1.1 思路分析: 圆的方程为: // (x0, y0)为圆心位置:(x, y)为圆上的点 (x - x0) ^ 2 + (y - y0) ^ 2 = r ^ 2 cos(angle) ^ 2 + sin(angle) ^ 2 = 1 因此,综合以上两式,可得: x = r * cos(angle) + x0 y = r * sin(angle) + y0 因此,应用正弦函数计算y坐标,用余弦函数计算x坐标. 1.2 实例: // cancelRequestAnimFrame的兼

如何使用 HTML5 Canvas 制作水波纹效果

原文:如何使用 HTML5 Canvas 制作水波纹效果 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能.     在线演示      源码下载   Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <

JavaScript+html5 canvas制作的百花齐放效果完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

JavaScript+html5 canvas制作的圆中圆效果实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar

html5中canvas的一个简单的例子

买了两本关于HTML5的书,一本<HTML5揭秘>,一本<HTML5高级程序设计>,现在在看<html5揭秘>网上说这本书是非常入门的一本,<HTML5权威指南>就相对深一点.所以买了揭秘,没买指南.都说HTML5的canvas很重要,所以这里把书上关于canvas的一些简单例子,给试着自己写了一遍,放上来把  代码如下 复制代码 window.onload = function(){     var canvas = document.getElement

如何使用HTML5的Canvas图形元素绘制图形

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 HTML5是目前HTML的最新标准.在笔者写这篇文章时,HTML5仍在积极的发展.HTML5除了提供新的标签信息外,同时还包含了新的应用程序编程接口(API),这样可以使我们能够在网页上提供更多丰富的多媒体和互动功能,而无需使用专有的插件.除了这些万维网联盟还公布了其他的相关技术,比如地理位置定位,脱机存储,档案管理等等. 在HTML5推出后

Android自定义view制作绚丽的验证码_Android

废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读. 怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足食,哈哈~ 一. 自定义view的步骤 自定义view一直被认为android进阶通向高手的必经之路,其实自定义view好简单,自定义view真正难的是如何绘制出高难度的图形,这需要有好的数学功底(后悔没有好好学数学了~),因为绘制图形经常要计算坐标点及类似的几何变换等等.自定义view通常只需要以下几个步骤: 写一个类继承