将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)
}