JSFiddle和Canvas //怎么了？

Question

我设置了这个简单的Koch分形JSFiddle - http://jsfiddle.net/oana/kU5D8/9/ -

但没有骰子。

代码来自Keith Peters的“混乱之战”。

代码在本地工作。在本地，它的组织方式如下：HTML文件显式引用2 .js文件。第一个是chaos.js，它包含变量混沌的赋值。第二个是koch.js，它包含分配给window.onload的函数表达式。

这对我来说更像是一场JSFiddle练习。我如何开始调试为什么我在JSFiddle中看到nada？

谢天谢地！

PS：stackoverflow告诉我jsfiddle.net的链接必须附带代码，所以这里是代码 -

var chaos = (function () {
    return {
        init: function () {
            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext("2d");
            this.setSize(window.innerWidth, window.innerHeight);

        },

        setSize: function (width, height) {
            this.width = this.canvas.width = width;
            this.height = this.canvas.height = height;

        },

        clear: function () {
            if (color) {
                this.context.fillStyle = color;
                this.context.fillRect(0, 0, this.width, this.height);
            } else {
                this.context.clearRect(0, 0, this.width, this.height);

            }
        }


    };

}());


window.onload = function () {
    var maxDepth = 0;

    init();

    function init() {
        chaos.init();
        draw();
        document.body.addEventListener('keyup',

        function (event) {
            console.log(event.keyCode);
            switch (event.keyCode) {
                case 32:
                    maxDepth += 1;
                    draw();
                    break;
                default:
                    break;
            }
        });

    }

    function draw() {
        var p0 = {
            x: chaos.width * 0.1,
            y: chaos.height * 0.75

        };

        var p1 = {
            x: chaos.width * 0.9,
            y: chaos.height * 0.75
        };

        chaos.clear();
        chaos.context.lineWidth = 2;

        koch(p0, p1, maxDepth);

    }

    function koch(p0, p1, depth) {
        var dx = p1.x - p0.x,
            dy = p1.y - p0.y,
            dist = Math.sqrt(dx * dx + dy * dy),
        unit = dist / 3,
        angle = Math.atan2(dy, dx), pa, pb, pc;

        pa = {
            x: p0.x + Math.cos(angle) * unit,
            y: p0.y + Math.sin(angle) * unit
        };


        pb = {
            x: pa.x + Math.cos(angle - Math.PI / 3) * unit,
            y: pa.y + Math.sin(angle - Math.PI / 3) * unit
        };

        pc = {
            x: p0.x + Math.cos(angle) * unit * 2,
            y: p0.y + Math.sin(angle) * unit * 2
        };

        if (depth === 0) {
            chaos.context.beginPath();
            chaos.context.moveTo(p0.x, p0.y);
            chaos.context.lineTo(pa.x, pa.y);
            chaos.context.lineTo(pb.x, pb.y);
            chaos.context.lineTo(pc.x, pc.y);
            chaos.context.lineTo(p1.x, p1.y);
            chaos.context.stroke();

        } else {
            koch(p0, pa, depth - 1);
            koch(pa, pb, depth - 1);
            koch(pb, pc, depth - 1);
            koch(pc, p1, depth - 1);

        }
    }
};

Answer 1

首先，您不需要使用jsFiddle指定head和body标记。在这种情况下，div也没有功能。

如果您想手动使用onload，可以选择在代码中插入代码（因为onload窗口上的color不会触发，因为jsFiddle上的默认值是触发脚本在这个事件上）：

代码中缺少... clear: function () { if (color) { ... 变量。你在浏览器中打开控制台（我在FF和Chrome中使用 shift + ctrl + i ）你可以看到那里的典型错误。

就是这一行（我通常右键点击结果框来查看来源 - 如果有人有更好的方法来查找行号请注释）：

{{1}}

<强> Modified fiddle here

但并非所有错误都是以这种方式捕获的。您可以自由地向典型对象添加示例属性（例如由于拼写错误），而不需要解析器抱怨。