智商不够用啊,这写代码成体力活了,求解救.
我就像搞一个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);
}
}
[解决办法]
img.onload=function(){ for (var y = 21; y <= 705; y += 124) { for (var x = 21; x <= 705; x += 124) { context.drawImage(img, x, y); } }}
[解决办法]
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); } } } }