canvas 相关问题

Canvas是自由格式图形输出的通用元素。

我正在尝试创建一个简单的画布网格，它将适合玩家当前的缩放级别，但也适合一定的画布高度/宽度比例屏幕限制。这是我到目前为止得到的： ...

javascript html canvas grid

回答 3 投票 0

我正在通过画布将图像剪切成形状。现在我想在它外面添加一个阴影。我怎样才能做到这一点？ var canvas1 = document.createElement("canvas"); var ctx = canvas1.getContext("2...

html image-processing css canvas html5-canvas

回答 1 投票 0

Compose 中的 android.graphics.Path

我尝试将图像放在切口后面。通过文档，我可以获得剪切路径（LocalView.current.view.rootWindowInsets.displayCutout.cutout.cutoutPath）但这个路径是android.graphics.Path并且c...

android canvas path android-jetpack-compose

回答 1 投票 0

使用画布创建像素星星

我正在寻找一个可以帮助完善显示星星的代码的人。我最近看到了异星工厂的更新和他们的网站 - https://factorio.com/galaxy。我对

javascript html canvas three.js

回答 1 投票 0

canvas无法在chrome中生成bmp图像dataurl

我有从视频中绘制图像的代码。这是代码函数捕获（）{ var video = document.getElementById("videoId"); var 画布 = 捕获(vi...</desc> <question vote="5"> <p>我有从视频中绘制图像的代码。这是代码</p> <pre><code><script type="text/javascript"> function capture() { var video = document.getElementById("videoId"); var canvas = capture(video, 1); var dataURL = canvas.toDataURL("image/bmp", 1.0); console.log("dataurl: "+dataURL); } </script> <body> <input type="button" value="Capture" onClick="capture()"/> <video id="videoId" width="640" height="480"/> </body> </code></pre> <p>在控制台上，dataurl 显示为“data:image/png;base64,...”</p> <p>问题？</p> <p>为什么dataurl生成为png格式？</p> <p>注意：这发生在 Chrome 浏览器[41.0.2272.89]中。在 firefox 中，url 是以 bmp 格式生成的。</p> </question> <answer tick="true" vote="11"> <h1>支持</h1> <p>并非所有浏览器都支持 BMP。没有要求支持<strong><a href="https://html.spec.whatwg.org/multipage/scripting.html#serialising-bitmaps-to-a-file" rel="noreferrer">除PNG之外的其他格式</a></strong>（我的重点）：</p> <blockquote> <p>用户代理必须支持 PNG（“image/png”）。用户代理<strong>可能</strong>支持其他类型。</p> </blockquote> <p>任何无法识别的格式<strong><a href="https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element" rel="noreferrer">将保存为默认PNG</a></strong>。</p> <blockquote> <p>第一个参数（如果提供）控制要显示的图像的类型返回（例如 PNG 或 JPEG）。默认为image/png；该类型是如果不支持给定类型，也可以使用。</p> </blockquote> <p>要检查是否支持某种格式，请检查返回的 data-uri 的第一部分：</p> <pre><code> var wantType = "image/bmp"; var dataUri = canvas.toDataURL(wantType); if (dataUri.indexOf(wantType) < 0) { // or use substr etc. data: + mime // Format NOT supported - provide workaround/inform user // See update below for workaround (or replacement) } </code></pre> <h1>解决方法：手动生成低级 BMP </h1> <p>要另存为 BMP，您必须从画布中提取像素数据、格式化文件头、以正确的格式附加数据、创建 Blob 并通过 objectURL 将其提供给用户。</p> <p><strong>用途：</strong></p> <pre><code>var bmpDataUri = CanvasToBMP.toDataURL(canvas); // returns an data-URI </code></pre> <p>还有获取 BMP 图像作为原始图像的选项 <pre><code>ArrayBuffer</code></pre>:</p> <pre><code>var bmpBuffer = CanvasToBMP.toArrayBuffer(canvas); </code></pre> <p>和<pre><code>Blob</code></pre>：</p> <pre><code>var bmpBlob = CanvasToBMP.toBlob(canvas); var url = URL.createObjectURL(bmpBlob); // example objectURL </code></pre> <p><pre><code>Blobs</code></pre> 当然可以与 <pre><code>createObjectURL()</code></pre> 一起使用，它可以用作图像源以及下载目标，并且往往比使用数据 URI 更快，因为它们不需要与 Base 进行编码/解码-64.</p> <p>它写入支持 Alpha 的 32 位 BMP 文件（Firefox 目前忽略 BMP 文件中的 Alpha 通道）。</p> <p>无论如何，这里是-</p> <h1>演示和源码</h1> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>/*! canvas-to-bmp version 1.0 ALPHA (c) 2015 Ken "Epistemex" Fyrstenberg MIT License (this header required) */ var CanvasToBMP = { /** * Convert a canvas element to ArrayBuffer containing a BMP file * with support for 32-bit (alpha). * * Note that CORS requirement must be fulfilled. * * @param {HTMLCanvasElement} canvas - the canvas element to convert * @return {ArrayBuffer} */ toArrayBuffer: function(canvas) { var w = canvas.width, h = canvas.height, w4 = w * 4, idata = canvas.getContext("2d").getImageData(0, 0, w, h), data32 = new Uint32Array(idata.data.buffer), // 32-bit representation of canvas stride = Math.floor((32 * w + 31) / 32) * 4, // row length incl. padding pixelArraySize = stride * h, // total bitmap size fileLength = 122 + pixelArraySize, // header size is known + bitmap file = new ArrayBuffer(fileLength), // raw byte buffer (returned) view = new DataView(file), // handle endian, reg. width etc. pos = 0, x, y = 0, p, s = 0, a, v; // write file header setU16(0x4d42); // BM setU32(fileLength); // total length pos += 4; // skip unused fields setU32(0x7a); // offset to pixels // DIB header setU32(108); // header size setU32(w); setU32(-h >>> 0); // negative = top-to-bottom setU16(1); // 1 plane setU16(32); // 32-bits (RGBA) setU32(3); // no compression (BI_BITFIELDS, 3) setU32(pixelArraySize); // bitmap size incl. padding (stride x height) setU32(2835); // pixels/meter h (~72 DPI x 39.3701 inch/m) setU32(2835); // pixels/meter v pos += 8; // skip color/important colors setU32(0xff0000); // red channel mask setU32(0xff00); // green channel mask setU32(0xff); // blue channel mask setU32(0xff000000); // alpha channel mask setU32(0x57696e20); // " win" color space // bitmap data, change order of ABGR to BGRA while (y < h) { p = 0x7a + y * stride; // offset + stride x height x = 0; while (x < w4) { v = data32[s++]; // get ABGR a = v >>> 24; // alpha channel view.setUint32(p + x, (v << 8) | a); // set BGRA x += 4; } y++ } return file; // helper method to move current buffer position function setU16(data) {view.setUint16(pos, data, true); pos += 2} function setU32(data) {view.setUint32(pos, data, true); pos += 4} }, /** * Converts a canvas to BMP file, returns a Blob representing the * file. This can be used with URL.createObjectURL(). * Note that CORS requirement must be fulfilled. * * @param {HTMLCanvasElement} canvas - the canvas element to convert * @return {Blob} */ toBlob: function(canvas) { return new Blob([this.toArrayBuffer(canvas)], { type: "image/bmp" }); }, /** * Converts the canvas to a data-URI representing a BMP file. * Note that CORS requirement must be fulfilled. * * @param canvas * @return {string} */ toDataURL: function(canvas) { var buffer = new Uint8Array(this.toArrayBuffer(canvas)), bs = "", i = 0, l = buffer.length; while (i < l) bs += String.fromCharCode(buffer[i++]); return "data:image/bmp;base64," + btoa(bs); } }; // -------- DEMO CODE ------------- var canvas = document.querySelector("canvas"), w = canvas.width, h = canvas.height, ctx = canvas.getContext("2d"), gr = ctx.createLinearGradient(0, 0, w, h), img = new Image(); gr.addColorStop(0, "hsl(" + (Math.random() * 360) + ", 90%, 70%)"); gr.addColorStop(1, "hsl(" + (Math.random() * 360) + ", 100%, 30%)"); ctx.fillStyle = gr; ctx.fillRect(0, 0, w, h); // append image from the data-uri returned by the CanvasToBMP code below: img.src = CanvasToBMP.toDataURL(canvas); document.body.appendChild(img);</code></pre> <pre><code><h2>Canvas left, BMP from canvas as image right</h2> <canvas width="299" height="200"></canvas></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>转换为 bmp 24bpp 受到用户1693593答案的启发：</p> <p>静态 toArrayBuffer24bpp（画布：HTMLCanvasElement）：ArrayBuffer {</p> <pre><code> var w = canvas.width, h = canvas.height, w4 = w * 4, idata = canvas.getContext("2d").getImageData(0, 0, w, h), data32 = new Uint32Array(idata.data.buffer), // 32-bit representation of canvas stride24 = Math.floor((24 * w + 31) / 32) * 4, // row length incl. padding pixelArraySize = stride24 * h, // total bitmap size fileLength = 122 + pixelArraySize, // header size is known + bitmap file = new ArrayBuffer(fileLength), // raw byte buffer (returned) view = new DataView(file), // handle endian, reg. width etc. pos = 0, x, y = 0, p, s = 0, v, r, g, b, x2; // write file header setU16(0x4d42); // BM setU32(fileLength); // total length pos += 4; // skip unused fields setU32(0x7a); // offset to pixels // DIB header setU32(108); // header size setU32(w); setU32(-h >>> 0); // negative = top-to-bottom setU16(1); // 1 plane setU16(24); // 24-bits setU32(0); // BI_RGB = 0 setU32(pixelArraySize); // bitmap size incl. padding (stride x height) setU32(2835); // pixels/meter h (~72 DPI x 39.3701 inch/m) setU32(2835); // pixels/meter v pos += 8; // skip color/important colors setU32(0xff0000); // red channel mask setU32(0xff00); // green channel mask setU32(0xff); // blue channel mask setU32(0xff000000); // alpha channel mask setU32(0x57696e20); // " win" color space // bitmap data, change order of ABGR to BGRA while (y < h) { p = 0x7a + y * stride24; // offset + stride x height x = 0; x2 = 0 while (x < w4) { v = data32[s++]; // get ABGR b = v & 0xff g = (v >> 8) & 0xff r = (v >> 16) & 0xff view.setUint8(p + x2++, r) view.setUint8(p + x2++, g) view.setUint8(p + x2++, b) x += 4; } y++ } return file; // helper method to move current buffer position function setU16(data) {view.setUint16(pos, data, true); pos += 2} function setU32(data) {view.setUint32(pos, data, true); pos += 4} </code></pre> <p>}</p> </answer> </body></html>

google-chrome canvas html5-canvas

回答 0 投票 0

无法看到正在渲染的动画，因为该函数位于游戏循环内

我对游戏开发还很陌生。事实上，这是我创建的第一个游戏。我的游戏是一个简单的气球爆破游戏。问题是我有一个泵资产，可以在 cl 上给气球充气......

javascript html css canvas game-development

回答 1 投票 0

在画布上图像的不透明部分周围绘制边框

我正在使用drawImage 将图像绘制到画布上。它是一个被透明像素包围的 PNG，如下所示：如何在 ca 上该图像的可见部分添加纯色边框...

javascript image canvas html5-canvas border

回答 4 投票 0

围绕圆画小线的数学

我必须围绕一个圆画线（就像在时钟中一样）。我如何使用 for 循环来实现这一点？

javascript html canvas

回答 4 投票 0

TypeError：ctx.toDataURL不是在node.js服务器端绘制画布的函数

我正在使用 typescript 在 node.js 服务器上创建一个基于 canvas 的 capacha 。从 'canvas' 导入 { createCanvas, loadImage, registerFont }; 常量画布 = createCanvas(100, 40); 常量 ctx = ca...

node.js canvas

回答 1 投票 0

在 javascript 中向画布添加方法和字段的正确编程模式

我想创建一个用js管理的html画布类，以便通过拖放拖放Path2D、缩放和翻译，以便一切都在类上干净地完成，而不是在实例上...

javascript class canvas

回答 1 投票 0

如何在画布上绘制 HTML 元素？

我想创建一个像素艺术应用程序，到目前为止一切顺利。您可以在像素网格上绘图。我想要弄清楚的是，如何将艺术渲染到 html 画布上。我知道有drawImage()，...

canvas grid render pixel generate

回答 1 投票 0

安装canvas时npm命令失败

我正在我的树莓派 5B 上安装画布。但它失败了。这是我得到的： berryuki@berryuki:~/items/Bot/salt-bot/external/salt-main $ npm i canvas npm 警告已弃用 [email protected]：这...