Question

我想在内部创建画布，然后在我的javascript中正常使用它。以下代码创建画布。

问题：我应该能够使用document.createElement（“sketchpad”）创建一个画布吗？

 var canvas = document.createElement("sketchpad");

代码：

function init() 
{
    //canvas = document.getElementById('sketchpad');

    var canvas = document.createElement("sketchpad");
    //var ctx    = canvas.getContext("2d");
    canvas.width  = 500;
    canvas.height = 500;
    document.body.appendChild(canvas);

    if (canvas.getContext)
    {
        ctx = canvas.getContext('2d');
    }

    if (ctx) 
    {
        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
    }
}

以下所有代码：

<html>
<head>
<title>Sketchpad</title>

<script type="text/javascript">
    var canvas;
    var ctx;
    var mouseX = 0;
    var mouseY = 0;
    var mouseDown = 0;

    function drawDot(ctx,x,y,size) 
    {
        r=0; 
        g=0; 
        b=0; 
        a=256;

        ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI*2, true); 
        ctx.closePath();

        ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
        ctx.fill();
    } 

    function clearCanvas(canvas,ctx) 
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function sketchpad_mouseDown() 
    {
        mouseDown=1;
        drawDot(ctx,mouseX,mouseY,4);
    }

    function sketchpad_mouseUp() 
    {
        mouseDown=0;
    }

    function sketchpad_mouseMove(e) 
    { 
        getMousePos(e);

        if (mouseDown==1) 
        {
            drawDot(ctx,mouseX,mouseY,4);
        }
    }

    function getMousePos(e) 
    {
        if (!e)
        {
            var e = event;
        }

        if (e.offsetX) 
        {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if (e.layerX) 
        {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
     }

    function init() 
    {
        //canvas = document.getElementById('sketchpad');

        var canvas = document.createElement("sketchpad");
        //var ctx    = canvas.getContext("2d");
        canvas.width  = 500;
        canvas.height = 500;
        document.body.appendChild(canvas);

        if (canvas.getContext)
        {
            ctx = canvas.getContext('2d');
        }

        if (ctx) 
        {
            canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
            canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
            window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
        }
    }
</script>

<style>
.leftside 
{
    float:left;
    width:120px;
    height:25px;
    background-color:#def;
    padding:10px;
    border-radius:4px;
}

.rightside 
{
    float:left;
    margin-left:10px;
}

#sketchpad 
{
    float:left;
    border:4px solid #888;
    border-radius:4px;
    position:relative; 
}
</style>
</head>

<body onload="init()">
        <div class="leftside">
           <input type="submit" value="Clear Sketchpad" onclick="clearCanvas(canvas,ctx);">
        </div>

        <div class="rightside">
         <!--  <canvas id="sketchpad" height="500" width="500">-->
        </canvas>
        </div>
 </body>
</html>

此新代码不起作用：

这个新代码不起作用，这就是一个人如何正确创建画布。

 var canvas = document.createElement("canvas"); //or what ever name that I want
 canvas.id  = "sketchpad";

if语句不是必需的，是吗？

function init() 
{
    //canvas   = document.getElementById('sketchpad');
    var canvas = document.createElement("canvas");
    canvas.id  = "sketchpad";

    if (canvas.getContext)
    {
        ctx = canvas.getContext('2d');
    }

    if (ctx) 
    {
        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
    }
}

此处代码：此代码似乎也不起作用。我将画板附加到画布，但它仍然没有将它添加到文档中。

function init() 
{
    //canvas = document.getElementById('sketchpad');
    var canvas = document.createElement("canvas");
    canvas.id = "sketchpad";
    document.getElementById('sketchpad').appendChild(canvas);

    if (canvas.getContext)
    {
        ctx = canvas.getContext('2d');
    }

    if (ctx) 
    {
        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
    }
}

enter image description here

Answer 1

sketchpad不是有效的DOM元素，因此它将创建HTMLUnknownElement。这不是你想要的。

您想创建一个画布，所以我们只需创建一个画布：

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

并给它ID＆＃34; sketchpad＆＃34;如果你想：

canvas.id = "sketchpad";

创建画布后，如果要显示它，则需要将其附加到HTML的现有元素。防爆。如果您希望画布显示在如下所示的div中：

<div id="rightside" class="rightside">

你会像这样附加你的画布：

document.getElementById('rightside').appendChild(canvas);

Here是使用您的代码的jsFiddle！

多数民众赞成！

-

createElement

的其他来源

为什么我不能用createElement创建画布元素？

1 个答案: