Создание нового холста динамически в JavaScript

У меня есть холст, который я могу сделать то, что я хочу сделать, это создать новые холсты динамически при нажатии на button.I've определил функцию генерации, но он не работаетСоздание нового холста динамически в JavaScript

здесь это скрипт

//<![CDATA[ 
window.addEventListener('load', function() { 
// get the canvas element and its context 
var canvas = document.getElementById('sketchpad'); 
var context = canvas.getContext('2d'); 

// create a drawer which tracks touch movements 
var drawer = { 
    isDrawing: false, 
    touchstart: function (coors) { 
     context.beginPath(); 
     context.moveTo(coors.x, coors.y); 
     this.isDrawing = true; 
    }, 
    touchmove: function (coors) { 
     if (this.isDrawing) { 
      context.lineTo(coors.x, coors.y); 
      context.stroke(); 
     } 
    }, 
    touchend: function (coors) { 
     if (this.isDrawing) { 
      this.touchmove(coors); 
      this.isDrawing = false; 
     } 
    } 
}; 
// create a function to pass touch events and coordinates to drawer 
function draw(event) { 
    var type = null; 
    // map mouse events to touch events 
    switch(event.type){ 
     case "mousedown": 
       event.touches = []; 
       event.touches[0] = { 
        pageX: event.pageX, 
        pageY: event.pageY 
       }; 
       type = "touchstart";     
     break; 
     case "mousemove":     
       event.touches = []; 
       event.touches[0] = { 
        pageX: event.pageX, 
        pageY: event.pageY 
       }; 
       type = "touchmove";     
     break; 
     case "mouseup":     
       event.touches = []; 
       event.touches[0] = { 
        pageX: event.pageX, 
        pageY: event.pageY 
       }; 
       type = "touchend"; 
     break; 
    }  

    // touchend clear the touches[0], so we need to use changedTouches[0] 
    var coors; 
    if(event.type === "touchend") { 
     coors = { 
      x: event.changedTouches[0].pageX, 
      y: event.changedTouches[0].pageY 
     }; 
    } 
    else { 
     // get the touch coordinates 
     coors = { 
      x: event.touches[0].pageX, 
      y: event.touches[0].pageY 
     }; 
    } 
    type = type || event.type 
    // pass the coordinates to the appropriate handler 
    drawer[type](coors); 
} 

// detect touch capabilities 
var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window); 

// attach the touchstart, touchmove, touchend event listeners. 
if(touchAvailable){ 
    canvas.addEventListener('touchstart', draw, false); 
    canvas.addEventListener('touchmove', draw, false); 
    canvas.addEventListener('touchend', draw, false);   
}  
// attach the mousedown, mousemove, mouseup event listeners. 
else { 
    canvas.addEventListener('mousedown', draw, false); 
    canvas.addEventListener('mousemove', draw, false); 
    canvas.addEventListener('mouseup', draw, false); 
} 

// prevent elastic scrolling 
document.body.addEventListener('touchmove', function (event) { 
    event.preventDefault(); 
}, false); // end body.onTouchMove 

}, false); // end window.onLoad 


function generate(){ 

var newCanvas = document.createElement('canvas'); 
newCanvas.width = 400; 
newCanvas.height = 400; 
document.getElementById('container').appendChild(newCanvas); 
ctx = newCanvas.getContext('2d'); 
} 

//]]>

здесь jsfiddle http://jsfiddle.net/regeme/WVUwn/ пс: рисунок не отображается на jsfiddle однако он работает на моем локальном хосте у меня нет совершенно никакого представления об этом, во всяком случае то, что мне нужно генерировать функцию, я сделал, но я думаю, что я отсутствует что-то .. Любые идеи? спасибо ..

источник

2013-08-13 regeme

Изменение jsfiddle вариант

"onLoad"

"No Wrap - in <body>"

EDIT: Смотрите также аналогичный вопрос здесь: Uncaught ReferenceError for a function defined in an onload function

JSFiddle опции: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions

источник

2013-08-13 07:27:06

Я извиняюсь, но что это? – regeme

Сообщение отредактировано. Извини за это! –

hmm Я не беспокоюсь о jsfiddle, мой главный вопрос - генерировать функцию для создания новых холстов динамически, а не потеть о jsfiddle, спасибо в любом случае .. – regeme

Это рабочее обновление вашего JSFIDDLE

JavaScript:

document.getElementById('generate').addEventListener('mousedown', generate, false);

Я думаю, это то, что вы хотите.

Я только что добавил eventListener к вашей кнопке в самом коде javascript.

P.S .: Я также добавил черный цвет фона к холсту, чтобы показать его на белом фоне.

источник

2013-08-13 07:46:17 Harshad

Мы оба отвечаем на заданный вопрос, однако, по-видимому, это не то, что он ищет. –

@Mr_Pouet Я так думаю. Но вопрос говорит то же самое. Не так ли? – Harshad

Благодарю вас обоих за ваш интерес. Я ценю это. Теперь возникла новая проблема, которой я не могу нарисовать новый сгенерированный холст. Я копирую и вставляю весь скрипт в функцию генерации, но это не сработало. Что я делаю, какие рекомендации? – regeme

Ниже приведена функция, которую я написал для динамического создания холста.

Если холст уже существует (тот же идентификатор), то возвращается этот холст.

Параметр pixelRatio может быть по умолчанию 1. Он используется для установки правильного размера на сетчатке дисплеев (так для iPhone с Retina значение будет 2)

function createLayer(sizeW, sizeH, pixelRatio, id, zIndex) { 

    // *** An id must be given. 
    if (typeof id === undefined) { 
     return false; 
    } 

    // *** If z-index is less than zero we'll make it a buffer image. 
    isBuffer = (zIndex < 0) ? true : false; 


    // *** If the canvas exist, clean it and just return that. 
    var element = document.getElementById(id); 
    if (element !== null) { 
     return element; 
    } 

    // *** If no zIndex is passed in then default to 0. 
    if (typeof zIndex === undefined || zIndex < 0) { 
     zIndex = 0; 
    } 

    var canvas = document.createElement('canvas'); 

    canvas.width = sizeW; 
    canvas.height = sizeH; 
    canvas.id = id; 
    canvas.style.width = sizeW*pixelRatio + "px"; 
    canvas.style.height = sizeH*pixelRatio + "px"; 
    canvas.style.position = "absolute"; 
    canvas.style.zIndex = zIndex; 

    if (!isBuffer) { 
     var body = document.getElementsByTagName("body")[0]; 
     body.appendChild(canvas); 
    } 

    return canvas; 
}

источник

2013-08-14 00:51:53 Jarrod

Создание нового холста динамически в JavaScript

ответ

Смежные вопросы