求帮我优化下这段代码

Question

function face(){
if(document.getElementById("bq01")){
var ctx1 = document.getElementById("bq01").getContext('2d');}
if(document.getElementById("bq02")){
var ctx2 = document.getElementById("bq02").getContext('2d');}
if(document.getElementById("bq03")){
var ctx3 = document.getElementById("bq03").getContext('2d');}
if(document.getElementById("bq04")){
var ctx4 = document.getElementById("bq04").getContext('2d');}
if(document.getElementById("bq05")){
var ctx5 = document.getElementById("bq05").getContext('2d');}
if(document.getElementById("bq06")){
var ctx6 = document.getElementById("bq06").getContext('2d');}
if(document.getElementById("bq07")){
var ctx7 = document.getElementById("bq07").getContext('2d');}
if(document.getElementById("bq08")){
var ctx8 = document.getElementById("bq08").getContext('2d');}
if(document.getElementById("bq09")){
var ctx9 = document.getElementById("bq09").getContext('2d');}
if(document.getElementById("bq10")){
var ctx10 = document.getElementById("bq10").getContext('2d');}
if(document.getElementById("bq11")){
var ctx11 = document.getElementById("bq11").getContext('2d');}
if(document.getElementById("bq12")){
var ctx12 = document.getElementById("bq12").getContext('2d');}
var ctx,img;
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var img6 = new Image();
var img7 = new Image();
var img8 = new Image();
var img9 = new Image();
var img10 = new Image();
var img11 = new Image();
var img12 = new Image();
var speed = 150;
function image(ctx,img){
function drawStar(){
    for(var i = 0; i < 6; i++ ){
        draw(i);
    }
    function draw(x){
        setTimeout(function(){
             ctx.clearRect(0,0,60,70);
             ctx.drawImage(img,0,70*x,60,70,0,0,60,70);
        },speed*x);
    }
}
setInterval(drawStar,900);
}
if(ctx1){
img1.src = 'themes/images/imgd/biaoqing01.png';
img1.onload = image(ctx1,img1);
}
if(ctx2){
img2.src = 'themes/images/imgd/biaoqing02.png';
img2.onload = image(ctx2,img2);
}
if(ctx3){
img3.src = 'themes/images/imgd/biaoqing03.png';
img3.onload = image(ctx3,img3);
}
if(ctx4){
img4.src = 'themes/images/imgd/biaoqing04.png';
img4.onload = image(ctx4,img4);
}
if(ctx5){
img5.src = 'themes/images/imgd/biaoqing05.png';
img5.onload = image(ctx5,img5);
}
if(ctx6){
img6.src = 'themes/images/imgd/biaoqing06.png';
img6.onload = image(ctx6,img6);
}
if(ctx7){
img7.src = 'themes/images/imgd/biaoqing07.png';
img7.onload = image(ctx7,img7);
}
if(ctx8){
img8.src = 'themes/images/imgd/biaoqing08.png';
img8.onload = image(ctx8,img8);
}
if(ctx9){
img9.src = 'themes/images/imgd/biaoqing09.png';
img9.onload = image(ctx9,img9);
}
if(ctx10){
img10.src = 'themes/images/imgd/biaoqing10.png';
img10.onload = image(ctx10,img10);
}
if(ctx11){
img11.src = 'themes/images/imgd/biaoqing11.png';
img11.onload = image(ctx11,img11);
}
if(ctx12){
img12.src = 'themes/images/imgd/biaoqing12.png';
img12.onload = image(ctx12,img12);
}
}

Answer 1

img12.onload = image(ctx12,img12);你确实是要这样添加onload事件？其实相当于根本没添加，因为那句代码等于
image(ctx12,img12);
img12.onload=undefined;下面随手打的，自己看看对不对。
    function face() {
        function image(ctx, img) {
            function drawStar() {
                for (var i = 0; i < 6; i++) {
                    draw(i);
                }
                function draw(x) {
                    setTimeout(function () {
                        ctx.clearRect(0, 0, 60, 70);
                        ctx.drawImage(img, 0, 70 * x, 60, 70, 0, 0, 60, 70);
                    }, speed * x);
                }
            }
            setInterval(drawStar, 900);
        }        var ctx, img, bq, speed = 150, id;
        for (var i = 1; i <= 12; i++) {
            id = i < 10 ? '0' + i.toString() : i.toString();
            bq = document.getElementById('bq' + id);
            if (bq) {
                ctx = bq.getContext('2d');
                img = new Image();
                img.src = 'themes/images/imgd/biaoqing' + id + '.png';
                img.onload = (function (_ctx, _img) { return function () { image(_ctx, _img) } })(ctx, img);
            }
        }
    }

Answer 2

非常感谢 http://topic.csdn.net/u/20121025/15/99f6b329-ff11-4451-89ea-82ce3d3f8598.html?seed=143198954&r=79991096#r_achor

Answer 3

<script type="text/javascript">
var $ = function(n){return document.getElementById(n);}
function face() {
var i = 13;
while (--i) {
var index = i < 10 ? '0' + i : i;
var cxt = $('dq'+index).getContext('2d');
var img = new Image();
img.src = 'themes/images/imgd/biaoqing'+index+'.png';
img.onload = image(cxt,img);
}
}
var speed = 150;
function image(ctx,img){
function drawStar(){
for(var i = 0; i < 6; i++ ){
draw(i);
}
function draw(x){
setTimeout(function(){
ctx.clearRect(0,0,60,70);
ctx.drawImage(img,0,70*x,60,70,0,0,60,70);
},speed*x);
}
}
setInterval(drawStar,900);
}
</script>