最近在学习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。。。
