Question

当我在Safari上运行此脚本时，一切正常。但是，当我在Chrome或Firefox中打开它时，它无法正确执行。在Chrome控制台中，它表示存在未捕获的类型错误：

ctx.drawImage(img, x + 1, y + 1, iwh, iwh);

和

function renderStarField() {
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    for (var i = 0; i < stars.length; i++) {
        stars[i].plot();
    }
}

这是我的整个脚本，感谢您的帮助！

<script type="text/javascript">
var starField = (function () {

    var browserWIDTH = $(document).width(),
        browserHEIGHT = $(document).height(),
        WIDTH = browserWIDTH + 500,
        HEIGHT = 400,
        FIELD_DEPTH = 15,
        DISTANCE = 500,
        STAR_DIAMETER = 45,
        STAR_SPEED = 0.003,
        canvas,
        ctx,
        numStars = 2000,
        stars = [];

    function Star() {
        this.calcPosition();
        var RANDSTAR = Math.floor(Math.random() * 3) + 1;
    }

    Star.prototype.calcPosition = function (reset) {
        this.x = this.randomise(-25, 50);
        this.y = this.randomise(-25, 50);
        this.z = reset ? FIELD_DEPTH : this.randomise(1, FIELD_DEPTH);
    };

    Star.prototype.randomise = function (min, max) {
        return Math.floor((Math.random() * max) + min);
    };

    Star.prototype.plot = function () {        
        //calculate 3d to 2d using perspective projection with the screen as the origin
        var x = this.x * (DISTANCE / this.z) + WIDTH / 2,
            y = this.y * (DISTANCE / this.z) + HEIGHT / 2;

        if ((x >= 0 && x <= WIDTH) && (y >= 0 && y <= HEIGHT)) {
                ctx.beginPath();
                var img = document.createElement('image');
                img.src ='Star1.png';
                var iwh = this.calcSize(this.z);
                ctx.moveTo(x, y);
                ctx.drawImage(img, x + 1, y + 1, iwh, iwh);
        }

        this.z -= STAR_SPEED;

        if (this.z <= 0) {
            this.calcPosition(true);
        }
    };

    Star.prototype.calcColor = function (z) {
        var rgb = Math.abs((z * 5) - 255).toFixed(0),
            a = (1 - ((z / (FIELD_DEPTH / 100)) / 100)).toFixed(1);

        return 'rgba(' + rgb + ', ' + rgb + ', ' + rgb + ', ' + a + ')';
    };

    Star.prototype.calcSize = function (z) {
        return Math.abs(((z / (FIELD_DEPTH / 100)) * (STAR_DIAMETER / 100)) - STAR_DIAMETER);
    };

    function setUpCanvas() {
        canvas = document.querySelector('#stage');
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        ctx = canvas.getContext('2d');
    }

    function buildStars() {
        for (var i = 0; i < numStars; i++) {
            stars.push(new Star());
        }
    }

    function renderStarField() {
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, WIDTH, HEIGHT);

        for (var i = 0; i < stars.length; i++) {
            stars[i].plot();
        }
    }

    function initialise() {
        setUpCanvas();
        buildStars();
        setInterval(renderStarField, 20);
    }

    return {
        init: initialise
    }
})();

document.addEventListener('DOMContentLoaded', function () {
    starField.init();
});
</script>

Answer 1

 if ((x >= 0 && x <= WIDTH) && (y >= 0 && y <= HEIGHT)) {
       ctx.beginPath();
       var img = document.createElement('image');
       img.src ='Star1.png';
       var iwh = this.calcSize(this.z);
       ctx.moveTo(x, y);
       ctx.drawImage(img, x + 1, y + 1, iwh, iwh);
 }

此代码有一些错误

img.src = 'Star1.png'无效，请尝试img.setAttribute('src','Star1.png');

并且创建<img>代码不是document.createElement('image')

尝试document.createElement('img');

更改为

 if ((x >= 0 && x <= WIDTH) && (y >= 0 && y <= HEIGHT)) {
       ctx.beginPath();
       var img = document.createElement('img');
       img.setAttribute('src','Star1.png');
       var iwh = this.calcSize(this.z);
       ctx.moveTo(x, y);
       ctx.drawImage(img, x + 1, y + 1, iwh, iwh);
 }

Chrome / Firefox中的Javascript / HTML Canvas问题（非Safari）

1 个答案: