最近在学习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. HTML基础知识总结一

    一.HTML是什么? HTML是超文本标记语言的英文缩写,"超文本"就是指页面内能够包括图片.链接.甚至音乐.程序等非文字元素.超文本标记语言的结构包括"头"部 ...

  2. Oracle 查询用户表信息,导入导出处理表空间不一致

    select table_name,tablespace_name from user_tables t; //查询用户默认表空间信息 SELECT t.* FROM USER_USERS t; 导入 ...

  3. mongo: 改

    语法:db.CollectionName.upadte(查询表达式,新值,选项); 查询表达式:定位哪些列是要被修改的列(即使查询表达式能命中多行,默认也只改一行,如果想改多行,可以用multi选项, ...

  4. iOS语言本地化，中文显示

    尽管一直相信xcode肯定提供有语言本地化的设置地方,可是一直也没凑着去改.非常多的汉化,还是使用代码去控制:比方navagition的return使用代码改动为"返回"! 近期在 ...

  5. 关于Java性能的9个谬论

    http://www.infoq.com/cn/articles/9_Fallacies_Java_Performance Java的性能有某种黑魔法之称.部分原因在于Java平台非常复杂,很多情况下 ...

  6. 解决eclipse中overlaps the location of another project: 'xxxx'

    找遍网络发现各种解释,最常见的一种是: new -> android project -> create project from exist source出现如下错误信息:Invalid ...

  7. [译] 回调地狱——JavaScript异步编程指南

    原文:Callback Hell 什么是 “回调地狱”? 在 JavaScript 中,我们经常通过回调来实现异步逻辑,一旦嵌套层级多了,代码结构就容易变得很不直观,最后看起来像这样: fs.read ...

  8. ios 抓包工具 ios青花瓷charles

    iOS_青花瓷Charles抓包,ios青花瓷charles 使用青花瓷Charles抓取手机端的网络请求: 第一步,下载安装并打开Charles 第二步,去掉菜单[Proxy]以下的[Mac OSX ...

  9. nginx根据目录反向代理到后端服务器

    nginx根据目录反向代理到后端不同的服务器 server {         listen 80;         server_name demo.domain.com;         #通过访 ...

  10. 零基础学python-1.5 第一个程序

    这一个章节我们来说说怎么建立一个python程序 1.打开idle 2.点击File->new file,然后会弹出一个编辑窗体 3.在编辑窗体里面输入命令代码 程序代码: print(&quo ...