HTML5 Canvas - нарисовать одно и то же во всех элементах canvas по классам - PullRequest
Новая
       0

HTML5 Canvas - нарисовать одно и то же во всех элементах canvas по классам

2 голосов
/ 16 декабря 2011

У меня есть следующий HTML ... 

<body onload="draw();">

  <p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (1)...</a></p>
  <p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (2)...</a></p>

</body>

... и javascript: 

function draw() {        
    var canvas2 = $('.demo2').get(0); // This draws in the first canvas
    //var canvas2 = $('.demo2').get(); This doesn't draw at all
    if (canvas2.getContext) {
        var ctx2 = canvas2.getContext('2d');

        ctx2.beginPath();
        ctx2.moveTo(6,0);
        ctx2.lineTo(6,12);
        ctx2.lineTo(0,6);
        ctx2.fillStyle = 'rgb(0,100,220)';
        ctx2.fill();
    }
}

Я хотел бы, чтобы все холсты этого классаdemo2 будет нарисовано.

Я думал, $('.demo2').get() получит все элементы по этому имени класса.$('.demo2').get(0) рисует в первом, но я хотел бы нарисовать их всех.

Демонстрация в http://jsfiddle.net/kMN3s/

Ответы [ 2 ]

4 голосов
/ 16 декабря 2011

Вы можете использовать .each для выполнения вещей для каждого .demo2: http://jsfiddle.net/kMN3s/2/.

function draw() {        
    $('.demo2').each(function() {
        if (this.getContext) { // `this` is an element each time
            var ctx2 = this.getContext('2d');

            ctx2.beginPath();
            ctx2.moveTo(6,0);
            ctx2.lineTo(6,12);
            ctx2.lineTo(0,6);
            ctx2.fillStyle = 'rgb(0,100,220)';
            ctx2.fill();
        }
    });
}
1 голос
/ 16 декабря 2011

Обновлено ваше демо http://jsfiddle.net/kMN3s/1/

$('canvas.demo2').each(function() { }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...