Несколько динамических элементов Canvas?

#javascript #jquery #canvas

Вопрос:

У меня есть некоторый код, динамически генерирующий элементы canvas из изображений с помощью jquery, и я хочу применить единый контекст рисования ко всем этим элементам, используя document.getElementsByName или аналогичный метод, возможно ли это? Вот мой код на данный момент:

 $('#imagebox img').each(function(){

      var width = $(this).width();
      var height = $(this).height();

        $('<canvas/>', {
        name: 'canv',
        css: {
          margin: '0px',
          background: '#FF0000',
          float: 'left',
          width: width,
          height: height
        }
      }).appendTo('#main'); 

          // Get the canvas element and its drawing context
        var canvas = document.getElementsByName('canv');
        var context = canvas.getContext('2d');

        /*
        |---------------------
        | Origin: Top Left
        | End: Bottom Right
        |---------------------
        */

        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(canvas.width, canvas.height);
        context.stroke();

        /*
        |---------------------
        | Origin: Top Right
        | End: Bottom Left
        |---------------------
        */

        context.save();
        context.beginPath();
        context.moveTo(canvas.width, 0);
        context.lineTo(0, canvas.height);
        context.stroke();
        context.restore();

    });

1. вы имеете в виду, что хотите, чтобы один canvas эффективно отображался на странице несколько раз, с изменениями, отраженными во всех копиях?

2. Да, один и тот же холст несколько раз с динамической шириной и высотой. Это выполнимо?

Ответ №1:

Да, безусловно, возможно достичь желаемого эффекта.

Вы просто рисуете в одном из контекстов canvas, а затем используете drawImage(originalContext,0,0) во всех других контекстах canvas, чтобы создать полную копию.

Исходный холст (тот, на котором вы выполняете все операции рисования) даже не обязательно должен быть на странице. При желании это можно было бы создать просто в коде, и все элементы на странице являются просто drawImage элементами этого контекста canvas.

Вот пример двух холстов, «совместно использующих» контекст. Весь материал рисуется на canvas1, а затем я масштабирую меньший canvas2 и добавляю к нему контекст canvas1:

http://jsfiddle.net/U6QLN/

1. Приятный, хотя технически и не «общий» контекст. Предположительно, это похоже на выполнение getImageData() в первом контексте и вызов putImageData() в других?

2. кроме того, если исходный холст меньше целевого, вы получите артефакты сглаживания по мере копирования пикселей из одного в другой.

3. Привет, спасибо и за это! Интересная штука. В итоге я использовал SVG, поскольку им было легче манипулировать для моих целей.

Ответ №2:

возможно ли это?

Нет, это невозможно.

Элемент Canvas похож на любой HTML-элемент — каждый экземпляр может появиться на HTML-странице не более одного раза.

Кроме того, каждый Canvas имеет ровно один контекст, и контексты не могут быть разделены.