将html画布应用于div

Question

我试图将画布应用于特定的div

<div id="wrapper-2"></div>

我已经在一个实验中做过这些实验，但我尝试的是另一个实验，而我使用的解决方案不起作用。下面是不起作用的链接：http://alejuu.com/demo/demo/Tearable-Cloth-master/

在另一个实验中有效的解决方案：

function init() { 
    container = document.getElementById( 'wrapper-2' ); 
    canvas    = document.createElement( 'canvas' ); 
}

这是我想要修改的脚本的链接

http://alejuu.com/demo/demo/Tearable-Cloth-master/Cloth.js

谢谢!

Answer 1

您链接到的解决方案实际上并不使用#wrapper-2，画布html已经在页面上，并且正在与以下内容一起应用：

canvas = document.getElementById('c');
ctx = canvas.getContext('2d');

canvas.width = 560;
canvas.height = 350;

如果要将<canvas>添加到div并对其进行初始化，则需要将<canvas>附加到容器<div>中，如下所示：

function init() { 
    container = document.getElementById( 'wrapper-2' ); 
    canvas    = document.createElement( 'canvas' ); 
}

您正在正确地创建容器<div>和<canvas> (据我所见)，但是您缺少的是将<canvas>添加到容器<div>中

function init() { 
    container = document.getElementById( 'wrapper-2' ); 
    canvas    = document.createElement( 'canvas' ); 

    container.appendChild(canvas)
}