Question

我在让putImageData实际放置图片数据方面遇到了一些麻烦。

我已检查thegame.pbuf有效数据，但似乎有效。在Opera和Firefox中测试过。

任何人都有任何想法为什么它没有显示我的颜色？

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #drawingSurface {
                width:500px;
                height:500px;
                border: 5px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="drawingSurface">2000 and late</canvas>
        <script type="text/javascript">

            var thegame = {
                init: function (width, height) {
                    var canvas = document.getElementById("drawingSurface");
                    thegame.ctx = canvas.getContext("2d");
                    thegame.width = width;
                    thegame.height = height;
                    thegame.pbuf = thegame.ctx.createImageData(width, height);
                },
                drawBanner: function (text) {
                    thegame.ctx.font = "bold 64px Verdana";
                    thegame.ctx.fillStyle = "#302226";
                    thegame.ctx.textAlign = "center";
                    thegame.ctx.fillText(
                        text, 
                        thegame.width / 2, thegame.height * (1 / 4)
                    );
                },
                update: function () {
                    for (var j = 0; j < thegame.height; j++) {
                        for (var i = 0; i < thegame.width; i++) {
                            var loc = 4 * (j * thegame.width + i);
                            thegame.pbuf[loc + 0] = Math.random() * 256 | 0;
                            thegame.pbuf[loc + 1] = Math.random() * 256 | 0;
                            thegame.pbuf[loc + 2] = Math.random() * 256 | 0;
                            thegame.pbuf[loc + 3] = Math.random() * 256 | 0;
                            thegame.pbuf[loc + 0] = 255;
                        }
                    }
                },
                draw: function () {
                    thegame.ctx.putImageData(thegame.pbuf, 0, 0);
                    this.drawBanner("Random Colors");
                }
            };

            thegame.init(500, 500);

            //Rendering 
            var interval = 1000 / 60;
            (function () {
                var lastTime = 0;
                var vendors = ['ms', 'moz', 'webkit', 'o'];
                for (
                    var x = 0; 
                    x < vendors.length && !window.requestAnimationFrame;
                    ++x
                ) {
                    window.requestAnimationFrame = window[vendors[x] 
                        + 'RequestAnimationFrame'];
                    window.cancelAnimationFrame = window[vendors[x] 
                        + 'CancelAnimationFrame'] || window[vendors[x] 
                        + 'CancelRequestAnimationFrame'];
                }

                if (!window.requestAnimationFrame) { 
                    window.requestAnimationFrame = function (
                        callback, 
                        element
                    ) {
                        var currTime = new Date().getTime();
                        var timeToCall = Math.max(
                            0, 
                            16 - (currTime - lastTime)
                        );
                        var id = window.setTimeout(function () {
                            callback(currTime + timeToCall);
                        }, timeToCall);
                        lastTime = currTime + timeToCall;
                        return id;
                    };
                }
                if (!window.cancelAnimationFrame) { 
                    window.cancelAnimationFrame = function (id) {
                        clearTimeout(id);
                    };
                }
            }());

            (function gameloop() {
                setTimeout(function () {
                    window.requestAnimationFrame(gameloop);
                    thegame.draw();
                    thegame.update();
                }, interval);
            })();

        </script>
    </body>
</html>

Answer 1

看起来像这些：

          thegame.pbuf[loc + 0] = Math.random() * 256 | 0;
          thegame.pbuf[loc + 1] = Math.random() * 256 | 0;
          thegame.pbuf[loc + 2] = Math.random() * 256 | 0;
          thegame.pbuf[loc + 3] = Math.random() * 256 | 0;
          thegame.pbuf[loc + 0] = 255;

应该是这样的：

          thegame.pbuf.data[loc + 0] = Math.random() * 256 | 0;
          thegame.pbuf.data[loc + 1] = Math.random() * 256 | 0;
          thegame.pbuf.data[loc + 2] = Math.random() * 256 | 0;
          thegame.pbuf.data[loc + 3] = Math.random() * 256 | 0;
          thegame.pbuf.data[loc + 0] = 255;

HTML5的javascript使用了大量的CPU但没有putImageData

1 个答案: