HTML5 Canvas...如果我有 2+ 我可以用什么方法来缩短我的代码吗？图像？
<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 循环中使用...
<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>
this is my 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";
Any best way to short my code ?
BTW.. i use in my Wordpress loop ...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您只是想让代码更短吗？
http://jsfiddle.net/TCdpV/3/
You just want to make the code shorter?
http://jsfiddle.net/TCdpV/3/
呵呵，我真的很想回答，但是没有 css 系统就很白痴，告诉
您的帖子似乎包含代码格式不正确的代码。请使用代码工具栏按钮或 CTRL+K 键盘快捷键将所有代码缩进 4 个空格。如需更多编辑帮助，请单击 [?] 工具栏图标。
但确实如此，我尝试了 7 次，现在我很生气;)
如果您正在寻找的话，只需使用“id”和“url”参数创建一个函数，其余的对我来说似乎足够短
heh i really tried to answer but system is being idiotic without css, telling
Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.
but it was, i gave 7 tries now i am pissed off ;)
just make a function with 'id' and 'url' params if it is what you are looking for, the rest seems short enough to me