Question

我有一个画布，我可以画出我想要做的事情就是在点击一个按钮时动态生成新的画布。我已经定义了一个生成函数，但它没有用

这是脚本

//<![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/ ps：绘图没有在jsfiddle上显示但是它在我的localhost上工作我完全不知道它，无论如何我需要的是生成函数，我做了但是我想我错过了什么.. 有任何想法吗？感谢..

Answer 1

下面是我编写的用于动态创建画布的函数。

如果画布已存在（相同的ID），则返回该画布。

pixelRatio参数可以默认为1.它用于在视网膜显示器上设置正确的尺寸（因此对于带Retina的iPhone，其值为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;
}

Answer 2

更改jsfiddle选项

"onLoad"

到

"No Wrap - in <body>"

编辑：请参阅此处的类似问题：Uncaught ReferenceError for a function defined in an onload function

JSFiddle选项：http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions

Answer 3

这是JSFIDDLE

的有效更新

的javascript：

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

我想这就是你想要的。

我刚刚在javascript代码中为你的按钮添加了一个eventListener。

P.S。：我还在画布上添加了黑色背景色以在白色背景上显示。

在javascript中动态生成新画布

3 个答案: