為什么相同的 js 代碼在 div 上有效，但在 canvas 上不起作用？

Question

我正在嘗試調整此演示以在畫布上工作： http : //soulwire.github.io/sketch.js/examples/particles.html

演示代碼只是一個 html 文件，里面有一個 div 元素和兩個 js 文件。 它實現了粒子效果。

最初，演示將容器設置為 div 元素並且它可以工作。

我修改了 html 文件，將 div 更改為畫布元素並將容器設置為畫布。 然后它停止工作。

我幾乎不知道從哪里尋找原因。

這是有效的 html 文件：

<html>

<head>
    <title>particles</title>
    <script src="sketch.min.js"></script>
</head>

<body>
    <div id="frame"></div>
    <script src="particles.js"></script>
</body>

</html>

這是粒子JS代碼：

    // ----------------------------------------
    // Particle
    // ----------------------------------------

    function Particle( x, y, radius ) {
        this.init( x, y, radius );
    }

    Particle.prototype = {

        init: function( x, y, radius ) {

            this.alive = true;

            this.radius = radius || 10;
            this.wander = 0.15;
            this.theta = random( TWO_PI );
            this.drag = 0.92;
            this.color = '#fff';

            this.x = x || 0.0;
            this.y = y || 0.0;

            this.vx = 0.0;
            this.vy = 0.0;
        },

        move: function() {

            this.x += this.vx;
            this.y += this.vy;

            this.vx *= this.drag;
            this.vy *= this.drag;

            this.theta += random( -0.5, 0.5 ) * this.wander;
            this.vx += sin( this.theta ) * 0.1;
            this.vy += cos( this.theta ) * 0.1;

            this.radius *= 0.96;
            this.alive = this.radius > 0.5;
        },

        draw: function( ctx ) {

            ctx.beginPath();
            ctx.arc( this.x, this.y, this.radius, 0, TWO_PI );
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    };

    // ----------------------------------------
    // Example
    // ----------------------------------------

    var MAX_PARTICLES = 280;
    var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];

    var particles = [];
    var pool = [];

    var demo = Sketch.create({
        container: document.getElementById( 'frame' )
    });

    demo.setup = function() {

        // Set off some initial particles.
        var i, x, y;

        for ( i = 0; i < 20; i++ ) {
            x = ( demo.width * 0.01 ) + random( -10, 10 );
            y = ( demo.height * 0.01 ) + random( -10, 10 );
            demo.spawn( x, y );
        }
    };

    demo.spawn = function( x, y ) {

        if ( particles.length >= MAX_PARTICLES )
            pool.push( particles.shift() );

        particle = pool.length ? pool.pop() : new Particle();
        particle.init( x, y, random( 5, 40 ) );

        particle.wander = random( 0.5, 2.0 );
        particle.color = random( COLOURS );
        particle.drag = random( 0.9, 0.99 );

        theta = random( TWO_PI );
        force = random( 2, 8 );

        particle.vx = sin( theta ) * force;
        particle.vy = cos( theta ) * force;

        particles.push( particle );
    };

    demo.update = function() {

        var i, particle;

        for ( i = particles.length - 1; i >= 0; i-- ) {

            particle = particles[i];

            if ( particle.alive ) particle.move();
            else pool.push( particles.splice( i, 1 )[0] );
        }
    };

    demo.draw = function() {

        demo.globalCompositeOperation  = 'lighter';

        for ( var i = particles.length - 1; i >= 0; i-- ) {
            particles[i].draw( demo );
        }
    };

    demo.mousemove = function() {

        var particle, theta, force, touch, max, i, j, n;

        for ( i = 0, n = demo.touches.length; i < n; i++ ) {

            touch = demo.touches[i], max = random( 1, 4 );
            for ( j = 0; j < max; j++ ) {
              demo.spawn( touch.x, touch.y );
            }

        }
    };

如果我在 div 元素中創建一個畫布，並將 JS 文件中的“容器”從 div 更改為新創建的畫布，它將不起作用。

Answer 1

Sketch（示例中使用的底層框架）在容器內添加了一個畫布。 畫布不能有子元素，因此您的代碼無法工作。

Answer 2

在 Sketch.js 中

element = options.element = options.element || doc.createElement( options.type === DOM ? 'div' : 'canvas' );

它檢查 dom 類型並創建一個畫布，所有功能都作用於它，正如 onberg 所說，除非瀏覽器不支持畫布，否則畫布內的元素將不可見。

為什么相同的 js 代碼在 div 上有效，但在 canvas 上不起作用？

問題描述

2 個解決方案

解決方案1
3 已采納 2015-09-08 16:37:58

解決方案2
1 2015-09-08 16:52:43

為什么相同的 js 代碼在 div 上有效，但在 canvas 上不起作用？

問題描述

2 個解決方案

解決方案1 3 已采納 2015-09-08 16:37:58

解決方案2 1 2015-09-08 16:52:43

解決方案1
3 已采納 2015-09-08 16:37:58

解決方案2
1 2015-09-08 16:52:43