最近在学习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. ubuntu下设置静态ip

    直接修改系统配置文件ubuntu的网络配置文件是:/etc/network/interfacesubuntu命令行修改网络配置方法前面auto  eth?,让网卡开机自动挂载. 为网卡配置静态IP地址 ...

  2. asp.net core mvc视频A：笔记3-2.表单使用

    页面上呈现表单的两种方式 新建项目,增加Test控制器,增加Index视图 方式一:HTML构建表单 运行 方式二:HTML 运行 数据绑定 处理方法 调用结果 登录后返回值 默认值绑定 方式一: 控 ...

  3. 转MQTT--Python进行发布、订阅测试

    前言  使用python编写程序进行测试MQTT的发布和订阅功能.首先要安装:pip install paho-mqtt 测试发布(pub)  我的MQTT部署在阿里云的服务器上面,所以我在本机上编写 ...

  4. Intent获取Activity返回值

    /* Intent获取Activity返回值* 三步:* 子Activity关闭后的返回值处理函数,requestCode是子Activity返回的请求码,与页面顶端的两个请求码相匹配,resultC ...

  5. logstash5安装并实现mariadb数据写入到elasticsearch

    java环境这里默认安装了 ,一般源码安装,这里就不说了 一.安装logstash 安装logstash可以用yum安装,也可以用源码安装: yum安装: 1.导入GPG: rpm --import ...

  6. oracle中建同名

    create synonym TD_B_REDIS_COUNT for ucr_param.TD_B_REDIS_COUNT;grant DELETE,UPDATE,INSERT,SELECT on ...

  7. PL/0编译程序

    Pl/0语言文法的BNF表示: 〈程序〉→〈分程序>. 〈分程序〉→ [<常量说明部分>][<变量说明部分>][<过程说明部分>]〈语句〉 <常量说明部 ...

  8. bootstrap input 加了 disabled 后台竟然接受不到值

    下午做了一个input  值需要不可改变.在input属性中加入了  disabled .在后台接受  var_dump($_POST); 竟然看不到值. <input type="t ...

  9. 通过Lock对象以及Condition对象实现多线程同步

    通过Lock对象以及Condition对象实现多线程同步: 在之前的学习中,无论是通过synchronized建立同步代码块,还是通过synchronized建立同步函数,都是把对象看成一把锁来实现同 ...

  10. 快速清除MS SQL SERVER 日志

    USE [master] GO ALTER DATABASE yourdatabase SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE yourd ...