最近在学习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 haojie.wang 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。。。
原文：http://www.cnblogs.com/jackyWHJ/p/3571259.html