html5-canvas 相关问题

Canvas是一个HTML元素,允许2D和3D中的2D形状,3D形状,位图图像和动画的动态,可编写脚本的渲染。

未捕获类型错误:canvas.getContext(...) 不是函数

我正在尝试在 HTML Canvas 中创建一个项目,但反复遇到此错误。我明白了 1) 当我使用 document.createElement 然后调用 canvas.getContext 2) 当我创建时 我正在尝试在 HTML Canvas 中制作一个项目,但反复遇到此错误。我明白了 1) 当我使用 document.createElement 然后调用 canvas.getContext 2) 当我创建 <canvas id="canvas"></canvas> 然后使用 document.getElementById 然后执行 canvas.getContext 这是我的代码: HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pythagoras Theorum Proof</title> </head> <body> <canvas id="canvas"></canvas> <script src="./script.js"></script> </body> </html> JS: /** * @type {HTMLCanvasElement} */ const canvas = document.getElementById("canvas") /** * @type {CanvasRenderingContext2D} */ const ctx = canvas.getContext("2d") (window.addEventListener("resize", () => { canvas.width = window.innerWidth; canvas.width = window.innerHeight }))() canvas.style.border = "2px solid black" (我需要 JSDoc 将 canvas 识别为 HTMLCanvasElement 并将 ctx 识别为 CanvasRenderingContext2D,因为我使用 VS Code 并需要其智能科学的帮助) 我添加了几个分号,并且还确保 addEventListener 的返回值不会被调用。您添加一个用于调整大小的事件侦听器,这很酷。不要调用结果,因为addEventListener不返回任何东西,参见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener,即返回undefined ,这不是一个函数,因此你不能调用它。 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); window.addEventListener("resize", () => { canvas.width = window.innerWidth; canvas.width = window.innerHeight; console.log("resized"); }); canvas.style.border = "2px solid black"; <canvas id="canvas"></canvas>

回答 1 投票 0

无法在 HTMLCanvasElement 上执行 toDataURL

从图像(本地文件)绘制画布后,我尝试使用命令 ctx.canvas.toDataURL("image/png") 导出它 但有一个错误: DOMException:无法在“

回答 3 投票 0

从命运之轮中删除价值

我使用了 Roko C. Buljan 的命运之轮代码:如何绘制命运之轮? 我是使用画布的新手,但我已经弄清楚了代码的大部分功能 - 数学绝对不是......

回答 2 投票 0

如何使用 html5 和 CSS 连接多个矩形?

我使用 Canvas 创建了多个矩形,每个矩形都有唯一的 id 我使用 Canvas 创建了多个矩形,每个矩形都有唯一的 id <table class="trpnl" id="tblPanel" style="width:300%;" cellpadding="0" cellspacing="0"> <tr style="height:40px;"></tr> @for(var i=1;i<=15;i++) { <tr> <td style="width:20px;"></td> <td> <canvas id="newCanvas_@i" width="200" height="8" style="border:1px solid #000000;"></canvas> </td> </tr> } </table> 这是画布的 JavaScript 代码 for(var i=1;i<=15;i++) { var c = document.getElementById('newCanvas'+"_"+i) var ctx = c.getContext('2d'); ctx.fillStyle = '#708090'; ctx.fillRect(0, 0, 200, 10); } 我得到这样的输出 我想显示这样的输出 我尝试在表格中设置 cellpadding="0" cellspacing="0" 但没有任何效果 任何人都可以给我一个想法如何合并或连接这些矩形,如预期的输出。 短暂性脑缺血发作。 您可以在同一个循环中执行这两个“操作”。 const panel = document.querySelector('.panel'), rows = document.createDocumentFragment(); for (let i=1; i<=15; i++) { const c = document.createElement('CANVAS'); c.width = 200; // Set canvas width c.height = 10; // Set canvas height const ctx = c.getContext('2d'); ctx.fillStyle = '#708090'; ctx.fillRect(0, 0, c.width, c.height); // Fill entire canvas with color rows.appendChild(c); } panel.appendChild(rows); .panel { display: flex; flex-direction: column; width: 200px; } .panel canvas { border: 1px solid #000000; } <div class="panel"></div>

回答 1 投票 0

如何在画布中围绕另一个旋转矩形创建一个矩形?

如何在画布上的黑色矩形下方绘制红色矩形,使得旋转的黑色矩形的所有 4 个顶点都接触红色矩形的所有 4 个边?我使用以下代码添加

回答 1 投票 0

为什么我的 Javascript Canvas Point & Click 游戏在几分钟后变得更慢?

我尝试禁用一些功能,包括所有音频效果和背景音乐元素,但它仍然变慢。我是否没有正确重置超时和间隔?嗯...唯一的地方

回答 1 投票 0

为什么使用ctx.lineCap = "round"时,ctx.roundRect的左上角会出现一个小点?

为什么使用 ctx.lineCap = "round" 时 ctx.roundRect 左上角会突然出现一个小点 这是 Chromium 浏览器中的错误,因为它不会出现在 Firefox 中吗?

回答 1 投票 0

如何在javascript中获取HTML5 Canvas.todataurl文件大小?

var data_url=canvas.toDataURL("image/png"); var img=$("#img").attr("src",data_url); img 文件大小是多少(kb)?

回答 4 投票 0

HTML5 Canvas 亮度控制

我想实现一个滑块控件来更改图像的亮度,很像此链接中显示的控件,但通过 HTML5 Canvas 实现: http://camanjs.com/examples/ 我想控制明亮...

回答 1 投票 0

给定 UV 岛内的一个点,获取包含 UV 岛顶点的数组

使用babylonJS、javascript和html5,我有一个网页,允许用户在对象表面放置(通过单击)彩色圆圈。 应用了圆的 OBJ 示例: 它工作得很好,除了我......

回答 0 投票 0

使用 Javascript/BabylonJS 获取包含光线投射命中的 UV 岛轮廓的数组

使用babylonJS、javascript和html5,我有一个网页,允许用户在对象表面放置(通过单击)彩色圆圈。 应用了圆的 OBJ 示例: 它工作得很好,除了我......

回答 0 投票 0

将API绘制到HTML画布的数据加载到p5js中

我有一个项目,其中有两个画布需要组合,一个在p5内部,一个在外部。第一个是 p5js 草图(通过 createCanvas 创建,本质上是一个绘图应用程序...

回答 2 投票 0

用画布(flexbox + Three.js)填充剩余的视口空间

我正在使用 Three.js 渲染到画布。我想要一个 div 位于画布上方,另一个 div 位于画布下方。画布应该填充之间的剩余空间(即使这意味着可以......

回答 0 投票 0

HTML5 画布,多边形上/内的图像可能吗?

有没有办法使用javascript html5 canvas,有一个多边形,然后在其中显示图像而不是颜色?

回答 3 投票 0

我的 JavaScript 粒子碰撞引擎无法渲染,“粒子不是构造函数”错误

我有以下代码,我尝试在其中创建基本粒子碰撞的引擎。但是,它无法渲染并留下一个空画布,并显示错误:“粒子不是

回答 1 投票 0

在JS中不使用HTML元素可以替代prompt()吗?

我正在用 Javascript 编写一个使用画布的程序。我想从 Prompt() 函数获取用户输入,但在我使用的环境中已弃用该输入。有什么可以替代...

回答 1 投票 0

使用fabric js时获取canvas对象

我正在使用 Fabric.js,并且我在一个地方创建了一个 Fabric 画布对象。 var x = new Fabric.Canvas("mycanvas"); 现在在另一个地方,我想访问“x”不可用的对象。 S...

回答 2 投票 0

在网络浏览器中使用 Javascript 对 webgl 画布中的帧的 mp4 视频进行编码的最高效方法是什么?

我可以使用 readPixels (https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels)从画布上捕获帧,但是然后呢? 我认为有几个 wasm 版本

回答 1 投票 0

虚幻引擎 5 到 HTML5 转换

我想将 UE5 创建的模型导出/打包为 HTML5 模型。据说UE5不支持转换为HTML5。我想知道是否有任何方法可以进行转换。 我想知道是否...

回答 0 投票 0

在专用网络工作者中进行图像像素操作

我需要使用 JavaScript 在浏览器中进行计算密集型图像像素操作。像素操作包括直方图均衡、使用亮度转换为灰度(CIE 实验室的 L*

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.