最近在学习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. 使用Maven整合SSH总结

    本人自己进行的SSH整合,中间遇到不少问题,特此做些总结,仅供参考. 项目环境: struts-2.3.31 + spring-4.3.7 + hibernate-4.2.21 + maven-3.3 ...

  2. DbVisualizer出现下列错误：Could not read XML file

    数据库连接工具对于我们软件测试工程师来说是日常的工具,一旦关键时刻报些莫名的错误,相信大家很是苦恼.当然,各公司数据库连接工具各异,像DbVisualizer.PLsql.sqldeveloper.T ...

  3. IBM Rational Appscan使用之扫描结果分析

    转自:http://www.nxadmin.com/penetration/825.html 之前有IBM Rational Appscan使用详细说明的一篇文章,主要是针对扫描过程中配置设置等.本文 ...

  4. 【最后的冲刺】android中excel表的导入和数据处理

    [最后的冲刺]android中excel表的导入和数据处理 ——学校课程的查询和修改 1.编写 The Class类把课程表courses.db当做一个实体类,hashcode和equals这两个类是 ...

  5. Atitit. 如何判断软件工程师 能力模型 程序员能力模型  项目经理能力模型

    Atitit. 如何判断软件工程师 能力模型 程序员能力模型  项目经理能力模型 这里能力模型的标准化是对工具的使用为基本 工具(ide,语言,类库,框架,软件) 第一步 ::可使用api 类库 框架 ...

  6. python 中的"switch"用法

    转载:http://python.jobbole.com/82008/ 为什么Python中没有Switch/Case语句? 不同于我用过的其它编程语言,Python 没有 switch / case ...

  7. DDD中的聚合和UML中的聚合以及组合的关系

    UML:聚合关系:成员对象是整体的一部分,但是成员对象可以脱离整体对象独立存在.如汽车(Car)与引擎(Engine).轮胎(Wheel).车灯(Light)之间的关系为聚合关系,引擎.轮胎.车灯可以 ...

  8. Java IO、网络编程、NIO、Netty、Hessian、RPC、RMI的学习路线

    好久没看Java IO这块的内容,感觉都快忘得差不多了.平成编程也没有设计到太多的Java基础知识,所以这里希望可以抽点时间回顾一下,让艾宾浩斯记忆曲线不要下降的太快. 回顾这个主要还是以总结为主,能 ...

  9. Java之StringBuffer和StringBuilder的差别与联系

    2.StringBuilder,StringBuffer 字符串拼接时用这两个类,效率高.节约内存.假设用字符串 "+"号拼接 性能差.而且浪费空间,产生非常多垃圾 StringB ...

  10. centos 6.9使用Rsync+Inotify-tools实现数据实时同步

    centos 6.9使用Rsync+Inotify-tools实现数据实时同步 说明: 操作系统:CentOS 6.9 源服务器:192.168.1.222 备份服务器:192.168.1.1.233 ...