0

http://jsfiddle.net/TCdpV/1/

<canvas id="img1" width="230" height="150" class="mainimage_large" style="margin: 0 0 0 10px;">
</canvas>


<canvas id="img2" width="230" height="150" class="mainimage_large" style="margin: 0 0 0 10px;">
</canvas>

这是我的 JS

var canvas1 = document.getElementById('img1');
var ctx1 = canvas1.getContext('2d');
var img1 = document.createElement('IMG');
img1.onload = function () {

    ctx1.save();
    ctx1.beginPath();
    ctx1.moveTo(23, 0);
    ctx1.lineTo(250, 0);
    ctx1.lineTo(250, 150);
    ctx1.lineTo(0, 150);
    ctx1.lineTo(0, 30);
    ctx1.closePath();
    ctx1.clip();
    ctx1.drawImage(img1, 0, 0);
    ctx1.restore();
}
img1.src = "http://s1.jrnl.ie/media/2011/05/Ming-Ming-41-230x150.jpg";






var canvas2 = document.getElementById('img2');
var ctx2 = canvas2.getContext('2d');
var img2 = document.createElement('IMG');
img2.onload = function () {

    ctx2.save();
    ctx2.beginPath();
    ctx2.moveTo(23, 0);
    ctx2.lineTo(250, 0);
    ctx2.lineTo(250, 150);
    ctx2.lineTo(0, 150);
    ctx2.lineTo(0, 30);
    ctx2.closePath();
    ctx2.clip();
    ctx2.drawImage(img2, 0, 0);
    ctx2.restore();
}
img2.src = "http://www.reisenews-online.de/wp-content/uploads/2011/03/Pandab%C3%A4r-Fu-HU-230x150.jpg";

有什么最好的方法来缩短我的代码吗？

顺便说一句..我在我的 Wordpress 循环中使用...

4

2 回答 2

1

你只是想让代码更短？

http://jsfiddle.net/TCdpV/3/

于 2011-08-19T15:25:06.017 回答
0

呵呵，我真的很想回答，但是没有 css 的系统很白痴，告诉

您的帖子似乎包含未正确格式化为代码的代码。请使用代码工具栏按钮或 CTRL+K 键盘快捷键将所有代码缩进 4 个空格。如需更多编辑帮助，请单击 [?] 工具栏图标。

但确实如此，我尝试了 7 次，现在我很生气；）



只需使用“id”和“url”参数创建一个函数，如果它是你正在寻找的，其余的对我来说似乎足够短

于 2011-08-19T10:01:28.927 回答