HTML5 Canvas ... В любом случае я могу сократить свой код, если у меня есть 2+ изображения? - PullRequest
Новая
       4

HTML5 Canvas ... В любом случае я могу сократить свой код, если у меня есть 2+ изображения?

0 голосов
/ 19 августа 2011

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петля ...

Ответы [ 2 ]

1 голос
/ 19 августа 2011

Вы просто хотите сделать код короче?

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

0 голосов
/ 19 августа 2011

хех, я действительно пытался ответить, но система идиотская без css, говоря

Ваше сообщение содержит код, который неправильно отформатирован как код. Сделайте отступы всего кода на 4 пробела, используя кнопку на панели инструментов кода или сочетание клавиш CTRL + K. Для получения дополнительной справки по редактированию щелкните значок панели инструментов [?].

но это было, я дал 7 попыток, теперь я разозлился;)



просто сделайте функцию с параметрами 'id' и 'url', если это то, что вы ищете, остальное кажется мне достаточно коротким

...