个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想制作一个使用此方法的分形生成器:https://www.johndcook.com/blog/2017/07/08/the-chaos-game-and-the-sierpinski-triangle/这真的很有趣，我想在正方形和五边形等上尝试一下。下面代码的结果应该看起来像一个谢尔宾斯基三 Angular 形，但不幸的是 Canvas 保持空白:/
感谢您的帮助:)
<!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>
最佳答案
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来获得全黑像素。
关于javascript - PutImageData() 不绘制 ImageData，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56339000/
24
4
0
我有一个 ImageData 对象，它包含所有监视器的屏幕截图，因此它是一个巨大的 ImageData。我现在想每次画一个显示器。我有所有的显示器尺寸。 所以我正在尝试使用 ctx.putImageD
我使用以下函数更新 Canvas 元素的内容，其中 frame_data 是 width*height*3 的数组。 function updateCanvas(frame_data, width,
在 Canvas 中恢复背景时遇到问题。我有一个 Canvas ，它可以根据选项的内容改变大小(它可以变得非常大)，我在上面绘制图像，现在我想要一个指示器以类似网格的格式显示鼠标所在的位置。问题是绘制
我正在从文件中读取 RGB 值并尝试将它们放在 Canvas 上。 我尝试了许多不同的循环和增量值变体。 JavaScript: function parseData(data) { var p
我想制作一个使用此方法的分形生成器:https://www.johndcook.com/blog/2017/07/08/the-chaos-game-and-the-sierpinski-triang
我有一个 Canvas ，背景中有一个大图像，前面有一个较小的圆形图像。我通过像这样使用剪辑实现了这种圆形图像效果 ctx.save(); ctx.beginPath(); ctx.arc(x,y,r
似乎某些图 block 不会被绘制。我将一个 tileset 拆分为 32x32 的正方形，并使用 2D 100x100 数组将 map 绘制到 Canvas 上。 然后它为播放器设置“视口(view
在 html5 中，当您使用 putImageData() 绘制到 Canvas 时，如果您正在绘制的某些像素是透明的(或半透明的)，您如何保持 Canvas 中的旧像素不受影响？ 示例: var i
我正在使用一个相对较大的 Canvas ，其中绘制了各种(复杂的)东西。然后我想保存 Canvas 的状态，以便稍后可以快速将其重置为现在的状态。我为此使用 getImageData 并将数据存储在变
我正在处理 Angular 项目，我必须将图像放在 Canvas 上。图片不是本地存储的，我只有图片数据所以我用这个。 this.context.putImageData(imgData, first
我对虚拟 Canvas 的概念不熟悉，知道为什么下面的代码不起作用吗？ $(document).ready(function () { var
我有以下代码: var img = new Image(); canvas = document.getElementById("c"); ctx = canvas.getContext('2d')
我正在尝试使用一些自定义代码绘制一个等距正方形来构建像素数据，然后使用 putImageData 将其放在 Canvas 上。 但我没有得到预期的结果，在快速浏览 Canvas 的原始像素数据后，我发
除了分别使用 getImageData 和 putImageData 之外，是否还有另一种方法可以将像素区域从(比如说) Canvas A 复制到 Canvas B。 此外，当复制到 Canvas B
我正在尝试从 websocket 读取像素(逐帧)并将其渲染到 Canvas 上(灰度)。数据显示正常，只是当前帧的像素与前一帧重叠显示。因此，几帧后图片就会被弄脏。 我想在渲染当前帧之前清除前一帧。
我想使用 HTML5 Canvas 绘制图像，转换图像，然后更改图像但保留我所做的转换。这可能吗？ 这里有一些伪代码来说明我的问题: // initially draw an image and tr
我认为 putImageData 比 drawImage 快，但我需要证明这一点。 我想这与 Flash 及其 Bitmap 和 BitmapData 类的情况相同。基本上，BitmapData 有助
我知道 ctx.globalcompositeoperation=source-over 在使用 drawimage 时有效，但它可以与 putimagedata 一起使用吗？ 最佳答案 简短的回答是
我正在尝试在 Node 服务器上托管 NES 模拟器 ( JSNES )。我知道您可以使用 unpkg 将 JSNES 嵌入网页中，但我希望它在服务器上运行，因为我希望多个客户端共享相同的状态。我 编
我最近一直在观看 Notch 在 twitch 上的一些直播，并对他几年前在 Ludum Dare 挑战赛中使用的一种渲染技术很感兴趣。我尝试将他的 java 代码转换为 javascript，但遇到
我是一名优秀的程序员,十分优秀！