智商不够用啊,这写代码成体力活了,求解救.

我就像搞一个7*7的格子,这代码量也太大了,求精减......[html文件]
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script type="text/javascript" src = "xxxx.js"></script>
<meat http-equiv="Cache-Control" Content="no-cache"/>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>[javascript文件]
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="0001.jpg";
img.onload=function(){
context.drawImage(img,21,21);
context.drawImage(img,135,21);
context.drawImage(img,249,21);
context.drawImage(img,363,21);
context.drawImage(img,477,21);
context.drawImage(img,596,21);
context.drawImage(img,705,21);
context.drawImage(img,21,135);
context.drawImage(img,135,135);
context.drawImage(img,249,135);
context.drawImage(img,363,135);
context.drawImage(img,477,135);
context.drawImage(img,596,135);
context.drawImage(img,705,135);
context.drawImage(img,21,249);
context.drawImage(img,135,249);
context.drawImage(img,249,249);
context.drawImage(img,363,249);
context.drawImage(img,477,249);
context.drawImage(img,596,249);
context.drawImage(img,705,249);
context.drawImage(img,21,363);
context.drawImage(img,135,363);
context.drawImage(img,249,363);
context.drawImage(img,363,363);
context.drawImage(img,477,363);
context.drawImage(img,596,363);
context.drawImage(img,705,363);
context.drawImage(img,21,477);
context.drawImage(img,135,477);
context.drawImage(img,249,477);
context.drawImage(img,363,477);
context.drawImage(img,477,477);
context.drawImage(img,596,477);
context.drawImage(img,705,477);
context.drawImage(img,21,596);
context.drawImage(img,135,596);
context.drawImage(img,249,596);
context.drawImage(img,363,596);
context.drawImage(img,477,596);
context.drawImage(img,596,596);
context.drawImage(img,705,596);
context.drawImage(img,21,705);
context.drawImage(img,135,705);
context.drawImage(img,249,705);
context.drawImage(img,363,705);
context.drawImage(img,477,705);
context.drawImage(img,596,705);
context.drawImage(img,705,705);
}
}

解决方案 »

  1.   


    img.onload=function(){
      for (var y = 21; y <= 705; y += 124) {
        for (var x = 21; x <= 705; x += 124) {
           context.drawImage(img, x, y);
        }
      }
    }
    好像坐标还不是等差数列。
    img.onload=function(){
      var v = [21, 135, 249, 363, 477, 596, 705;
      var l = v.length();
      for (var y = 0; y <= l; y ++) {
        for (var x = 0; x <= l; x ++) {
           context.drawImage(img, v[x], v[y]);
        }
      }
    }
      

  2.   

    window.onload = function(){
         var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var 
    low = 7,     //循环行列
    row = 7,
    imgSrc = '0001.jpg',
    imgWidth = 16,
    imgHeight = 16,
    X = 50 ,    //起点坐标
    Y = 50;

    var img = new Image();
    img.src = imgSrc;
    img.onload = function(){
    for( var j = 0; j < row ; j++ ){
    var y = j * imgHeight + Y;
    for( var i = 0; i< low ; i++  ){
    var x = i* imgWidth + X;
    context.drawImage(img,x,y);
    }

    }
    }
    }