最近在学习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. 使用Vitamio开发iOS平台上的万能播放器

    迅速了解 Vitamio是干什么的?看官方怎么说: "Vitamio SDK for iOS是Yixia Ltd官方推出的 iOS 平台上使用的软件开发工具包(SDK),为iOS开发人员提供 ...

  2. html 绘图阴影和透明度

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. MySQL_常用SQL语句

    1.按小时统计的语句 select concat(date_format(gmt_create, "%Y-%m-%d %k:00~"), hour(gmt_create)+1, & ...

  4. 详细的obs操作教程(windows/mac)图解

    直播推流软件obs操作配置教程包含支持mac和windows配置 1 2 3 4 5 6 7 8 9

  5. 出现windows启动服务失败（无法从命令行或调试器启动，需要安装InstallUtil.exe)的解决办法

    两种方法1 从命令行安装2 选择项目-视图-自定义操作   然后将 安装,提交,回滚,卸载分别加入自定义操作,注意InstallClass属性为true

  6. linux .vimrc的设置!

    0.记得在配之前先下载vim.不同的版本下载vim使用不同命令 ubuntu使用sudo apt-get install vim 1.vi ~/.vimrc  打开当前用户下的vim的配置文件(修改完 ...

  7. ubuntu 16.04安装visual studio code 提示libnss3版本低:NSS >= 3.26 is required

    Linux Ubuntu 1604安装VS CODE之后,执行./code报错误: [3781:0914/160851.489979:FATAL:nss_util.cc(632)] NSS_Versi ...

  8. EasyUI入门视频教程

    EasyUI入门视频教程02   http://www.tudou.com/programs/view/TBlaIcNU5ck/

  9. 从外置U盘中拷文件到Linux（挂载）

    第一步: 将U盘插入电脑,在Linux系统中会有反应,类似sda.sdb……,然后去/dev目录查看是否有这个文件 第二步: 新建一个目录:/mnt/mine 第三步: 将u盘挂载到/mnt/mine ...

  10. - WebStorm 转载【干货技术贴】之-mac下如何安装WebStorm + 破解

    写在前面 之前公司不忙的时候,用闲暇功夫想学习React-Native 苦于找不到一款好的代码编辑器,在广泛搜索以后,发现最适合的就是网页代码编辑器WebStrom,所以就尝试安装和破解,下面我将自己 ...