最近在学习canvas,http://corehtml5canvas.com/code-live/，主要的学习方式就是通过上面的一些例子来学习canvas的一些用法。但是我发现，这里的例子，只要canvas的内容有一点点变化（甚至是某个元素位置的变动），都会去清空整个canvas然后整个canvas重绘。例如下面时钟的例子

http://corehtml5canvas.com/code-live/ch01/example-1.11/example.html。

但是，对于这个时钟的功能来说，每一秒变化，改变的只是指针，刻度数字和圆圈都不需要改变，就因为指针的变化而去重绘整个canvas是不是耗费了性能呢。如果把指针变化这部分提出来成为一层，然后刻度不变的那一部分作为一层，2层叠加，上面一层背景透明，这样，能达到同样的效果，又能减少重绘的部分，相应的性能也能提高。抱着这种想法我试验了一下。代码如下：

<html>

<head>

    <title>Clock</title>

    <style>

        body {

            background: #dddddd;

        }

        #canvas1 {

            position: absolute;

            left: 0px;

            top: 0px;

            margin: 20px;

            background: #ffffff;

            border: thin solid #aaaaaa;

        }

        #canvas2 {

            position: absolute;

            left: 0px;

            top: 0px;

            margin: 20px;

            border: thin solid #aaaaaa;

        }

    </style>

</head>

<body>

<canvas id="canvas1" width="400" height="400">

    Canvas not supported

</canvas>

<canvas id="canvas2" width="400" height="400">

    Canvas not supported

</canvas>

<script src="MyTestClock.js"></script>

</body>

</html>

MyTestClock.js部分代码：

/**

 * Created by jackyWHJ on 14-2-26.

 */

var canvas1 = document.getElementById('canvas1'),

    context1 = canvas1.getContext('2d'),

    canvas2 = document.getElementById('canvas2'),

    context2 = canvas2.getContext('2d'),

    FONT_HEIGHT = 15,

    MARGIN = 35,

    HAND_TRUNCATION = canvas1.width/25,

    HOUR_HAND_TRUNCATION = canvas1.width/10,

    NUMERAL_SPACING = 20,

    RADIUS = canvas1.width/2 - MARGIN,

    HAND_RADIUS = RADIUS + NUMERAL_SPACING;

// Functions.....................................................

function drawCircle() {

    context1.beginPath();

    context1.arc(canvas1.width/2, canvas1.height/2,

        RADIUS, 0, Math.PI*2, true);

    context1.stroke();

}

function drawNumerals() {

    var numerals = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],

        angle = 0,

        numeralWidth = 0;

    numerals.forEach(function(numeral) {

        angle = Math.PI/6 * (numeral-3);

        numeralWidth = context1.measureText(numeral).width;

        context1.fillText(numeral,

            canvas1.width/2  + Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,

            canvas1.height/2 + Math.sin(angle)*(HAND_RADIUS) + FONT_HEIGHT/3);

    });

}

function drawCenter() {

    context1.beginPath();

    context1.arc(canvas1.width/2, canvas1.height/2, 5, 0, Math.PI*2, true);

    context1.fill();

}

function drawHand(loc, isHour,color) {

    var angle = (Math.PI*2) * (loc/60) - Math.PI/2,

        handRadius = isHour ? RADIUS - HAND_TRUNCATION-HOUR_HAND_TRUNCATION

            : RADIUS - HAND_TRUNCATION;

    context2.beginPath();

    context2.strokeStyle = color;

    context2.moveTo(canvas2.width/2, canvas2.height/2);

    context2.lineTo(canvas2.width/2  + Math.cos(angle)*handRadius,

        canvas2.height/2 + Math.sin(angle)*handRadius);

    context2.stroke();

}

function drawHands() {

    context2.clearRect(0,0,canvas2.width,canvas2.height);

    var date = new Date,

        hour = date.getHours();

    hour = hour > 12 ? hour - 12 : hour;

    drawHand(hour*5 + (date.getMinutes()/60)*5, true, "#FF0000");

    drawHand(date.getMinutes(), false, "#00FF00");

    drawHand(date.getSeconds(), false, "#0000FF");

}

function drawClock() {

    drawCircle();

    drawCenter();

    drawNumerals();

}

// Initialization................................................

context1.font = FONT_HEIGHT + 'px Arial';

drawHands();

drawClock();

loop = setInterval(drawHands, 1000);

浏览器看了下，原来重绘需要2ms，现在是1ms。。。

2个canvas叠加运用(时钟例子)的更多相关文章

  1. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  3. canvas做的时钟，学习下

    canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...

  4. canvas炫酷时钟

    canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

  5. 应用canvas绘制动态时钟--每秒自动动态更新时间

    使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一. ...

  6. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

  7. canvas画的时钟

    结合几天来学习的canvas的API,终于完成了一个时钟呵呵 html <!doctype html> <html> <head> <meta charset ...

  8. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  9. html5、canvas绘制本地时钟

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. SQLserver备份数据库示例

     BACKUP DATABASE [yee]TO  DISK = N'D:\数据库备份\yee2015.9.11.bak'WITH  NAME = N'yee - 备份',  NOFORMAT, NO ...

  2. Windows下创建.gitgnore文件

    相信使用过git的朋友可能遇到过,直接在windows下创建.gitgnore文件失败.类似截图那样 上网查了一下,有两种方法. 方法1: 此方法较为简单,前提是安装了git bash. 用git b ...

  3. Android开发环境搭建 for windows (linux类似） 详细可参考“文件”中“Android开发环境搭建.pdf ”

    ADT-Bundle for Windows 是由Google Android官方提供的集成式IDE,已经包含了Eclipse,你无需再去下载Eclipse,并且里面已集成了插件,它解决了大部分新手通 ...

  4. Android下Slidingmenu和actionbarsherlock的使用

    1 http://blog.csdn.net/wangjinyu501/article/details/9331749  博客很多,推荐此教程,slidingmenu的demo可以演示 2 http: ...

  5. cdn日志统一下载程序

    最近实现了网宿cdn,阿里云cdn,腾讯cdn的日志统一格式下载程序,使用简单方便,有需要详见代码: https://github.com/mikeluwen/CdnLogDownload

  6. 关于CDN对动态网站加速的一些看法

    CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...

  7. 定时执行线程池ScheduledExecutorService的使用

    ScheduledExecutorService progressExecutorService = Executors.newScheduledThreadPool(1); ScheduledFut ...

  8. STM32 寄存器库和固件库

    寄存器和固件库开发的差别和联系 固件库就是函数的集合,固件库函数的作用是向下负责与寄存器直接打交道.向上提供用户函数调用的接口(API). 在 51 的开发中我们经常的作法是直接操作寄存器,比方要控制 ...

  9. Android调用相机实现拍照并裁剪图片，调用手机中的相冊图片并裁剪图片

    在 Android应用中,非常多时候我们须要实现上传图片,或者直接调用手机上的拍照功能拍照处理然后直接显示并上传功能,以下将讲述调用相机拍照处理图片然后显示和调用手机相冊中的图片处理然后显示的功能,要 ...

  10. saltstack之用户管理

    1.添加用户 /srv/salt/top.sls base: 'test82.salt.cn': - user.useradd /srv/salt/user/useradd.sls jim: user ...