我正在尝试为世界的虚假像素化地图制作动画,以便它在不同颜色之间平滑过渡.我原来用jquery和表做了这个,但cpu使用率非常高,所以我想我会尝试使用html5 canvas.但是,我仍然获得非常高的CPU使用率.我想知道它是否是代码中的大数组(我用它来表示应该填充正方形的位置).任何帮助将深表感谢.
<!DOCTYPE html>
<html>
<head>
<title>canvas version</title>
<script src="raphael.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id="canvasesdiv" style="position:relative; width:864px; height:456px">
<canvas id="world-map" width="864" height="456" style="position:absolute; left:0px; top:0px; z-index:1;">
</canvas>
<canvas id="backdrop" width="864" height="456" style="position:absolute; left:0px; top:0px; z-index:0;"></canvas>
<script type="text/javascript">
//declare vars
var ctx1
var ctx2
var layer1
var layer2
var red = 255;
var dr = 1;
//initialization
function init() {
layer1 = document.getElementById("backdrop");
ctx1 = layer1.getContext("2d");
//layer2 = document.getElementById("world-map");
//ctx2 = layer2.getContext("2d");
drawMap(red);
setInterval(function(){red = drawMap(red);},1);
}
//LOOP THROUGH …