问PutImageData()不绘制ImageData
EN

Stack Overflow用户

提问于 2019-05-28 17:26:56

回答 1查看 53关注 0票数 0

我想做一个使用这种方法的分形生成器：https://www.johndcook.com/blog/2017/07/08/the-chaos-game-and-the-sierpinski-triangle/，它真的很有趣，我想在正方形和五边形等上尝试它。下面代码的结果应该看起来像一个Sierpinski三角形，但不幸的是画布仍然是空白的:/

感谢您的帮助:)

<!DOCTYPE html>
<html>
    <head>
        <title>sierpinksi polygons</title>
    </head>
    <body>
        <canvas width="500" height="500" id="canvas"></canvas>
        <script>
            let canavas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");
            let imgdata = ctx.createImageData(500, 500);
            let data = imgdata.data;
            let vertices = [{x: 0, y: 0}, {x: 500, y: 0}, {x: 250, y: 433}];

            function pixel(x, y) {
                data[4*y*canvas.width+4*x + 3] = 1; //sets alpha to 1 which makes the pixel black
            }

            function random() {
                return vertices[Math.floor(Math.random()*vertices.length)];
            }

            let point = {x: 0, y: 0};

            for (let i = 0; i < 10000; i++) {
                let temp = random();

                //algorithm to draw sierpinksi triangle pixel by pixel
                point.x = point.x + (temp.x - point.x)/2;
                point.y = point.y + (temp.y - point.y)/2;
                pixel(Math.round(point.x), Math.round(point.y));
            }
            console.log(imgdata)
            ctx.putImageData(imgdata, 0, 0);
        </script>
    </body>
</html>

javascript

canvas

imagedata

回答 1

Stack Overflow用户

发布于 2019-05-28 17:48:28

data[4*y*canvas.width+4*x + 3] = 1; //sets alpha to 1 which makes the pixel black

不，它不是-RGBA值的A分量也必须在0到255的范围内，255与CSS中的opacity: 1的含义相匹配。

在1中，您为像素设置了1/255%的不透明度，实际上仅为0.00392156862

你想在这里使用255来获得完整的黑色像素。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56339000

复制

相似问题

问PutImageData()不绘制ImageData
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PutImageData()不绘制ImageDataEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PutImageData()不绘制ImageData
EN