drawimage 相关问题

drawImage（）方法将图像，画布或视频绘制到画布上。它还可以绘制图像的一部分，和/或增大/减小图像大小。

我正在编写一个简单的游戏来学习 JS，并且在此过程中我正在学习 HTML5，所以我需要在画布上绘制东西。这是代码：让桨=新桨（游戏宽度，游戏高度）；新

javascript html canvas drawimage

回答 1 投票 0

我需要使用画布drawImage()渲染字体很棒的图像。 drawImage 接受图像参数： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#image 一个元素...

javascript canvas font-awesome drawimage

回答 2 投票 0

Javascript需要输出HEX而不是RGB（getImageData，drawImage）

只是为了澄清我不太擅长 javascript 并且仍在学习。我在互联网上找到了这段代码，它获取图像并将其转换为小跨度单元格以获得像素化图像。代码

javascript drawimage getimagedata

回答 1 投票 0

React JS canvas getImageData 从本地图像显示 404 未找到错误

我想从项目文件内这些小 png 图像中的所有像素获取 alpha 通道数据。但目前，我只是做一个 console.log 看看我是否可以执行...

canvas react-hooks src drawimage getimagedata

回答 1 投票 0

Javascript drawImage() 不在 HTML 画布中显示图像

在我将图像放置在画布中的简单测试代码（HTML 和 Javascipt）中，drawImage() 不起作用。图像是在 HTML 页面中创建的，而不是在画布中创建的。代码是：在我将图像放置在画布中的简单测试代码（HTML 和 Javascipt）中，drawImage() 不起作用。图像是在 HTML 页面中创建的，而不是在画布中创建的。代码是： <html> <body> <img id = "myImg" src = "testImg.JPG" alt="Cannot find image" width="100" height="100"> <canvas id = "myCanvas" width="150" height="175" style = "border:5px solid #000000;"></canvas> <script> const canvas = document.getElementById("myCanvas"); const img = document.getElementById("myImg"); const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); function showPics(){ ctx.fillStyle = "red"; ctx.fillRect(0,0,50,50); } showPics(); </script> </body> </html> 在Win10 Firefox中，打开HTML文件后，图像显示在HTML页面中，但不显示在画布中。如果我刷新，图像确实会出现在页面和画布中。在我的 Android 6 手机中，图像出现在 HTML 页面中，但从未出现在画布中。 Win10火狐浏览器截图为： []() 我的印象是，即使图像文件与html代码位于同一文件夹中，javascript代码也找不到图像文件。在Win10 Firefox中，refresh是做什么来允许javascript访问图像文件的？在Android 6中，为什么根本找不到它？ @Mike 感谢您指出我确保图像已加载。以下代码有效。 <html> <body> <img id = "myImg" src = "testImg.JPG" alt="Cannot find image" onload = "showPics()" width="100" height="100"> <canvas id = "myCanvas" width="150" height="175" style = "border:5px solid #000000;"></canvas> <script> function showPics(){ const canvas = document.getElementById("myCanvas"); const img = document.getElementById("myImg"); const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.fillStyle = "red"; ctx.fillRect(0,0,50,50); } </script> </body> </html>

javascript drawimage

回答 1 投票 0

为什么drawImage()会改变目标框外的画布？

根据 drawImage() 的文档，我正在尝试绘制到画布的特定部分。然而，目标框外的区域受到影响，即它们的 alpha 值为零......

html canvas html5-canvas drawimage

回答 1 投票 0

HTML5 Canvas DrawImage 奇怪的错误

我正在尝试上传图像并在画布上绘制图像。我发现了奇怪的错误。有时，在画布上绘制从 Ios 设备拍摄的图片。具体图片不显示。下面是我的代码 $(文档).ready(有趣...

ios html5-canvas drawimage

回答 0 投票 0

Canvas 不只在某些移动设备上绘制所有图像

我在画布上遇到问题，无法在特定设备上绘制所有图像（仅绘制了一些图像）。确切地说，Mobile Chrome (Samsung)，到目前为止，我还没有在任何其他设备上遇到过这个问题。 c...

javascript reactjs html5-canvas drawimage

回答 0 投票 0

为什么我的画布图像没有按正确的顺序加载/渲染，或者没有按预期使用 image.onload？

我正在尝试将一个图像加载到 HTML 画布上，然后将另一个图像加载到该图像之上。但是，我从每个浏览器中得到以下行为：铬合金：第一次执行 - 只有

javascript dom dom-events html5-canvas drawimage

回答 0 投票 0

Javascript Canvas - 如何将图像转换为基本颜色？

我正在尝试在透明的不规则形状 .png 图像周围添加边框，所以我认为最好的方法是绘制两次，将图像转换为选择的颜色，绘制大几个像素...

javascript canvas drawimage

回答 0 投票 0

调整画布大小时意外裁剪 SVG 图像

const pieceSVG = document.getElementById("pieceSVG"); // 将 SVG 元素转换为要转换为 blob 的字符串 var svgString = new XMLSerializer().serializeToString(pieceSVG); //创建我们的...

svg html5-canvas resize drawimage

回答 2 投票 0

drawImage()不工作

我正在阅读 "用HTML5、CSS3和Javascript制作等距社交实时游戏"。我看的不深，遇到了一个画布问题，让我纠结了大半天。...

javascript canvas drawimage preloading

回答 2 投票 28

HTML5画布drawImage()在FireFox上无法使用。

我正在做一个项目，我需要在画布上画一个符号的动画。这在chrome上很好用，但在FireFox上什么也没画。没有错误信息或 ...

javascript html5-canvas drawimage

回答 1 投票 1

Javascript canvas drawImage的结果是空白？-修改后的

我在一个lit-element组件内工作，试图将一个img元素绘制到canvas元素上：return html`。