html5-canvas相关内容

html5画布中的运动jpeg

我正在尝试将运动 jpeg (mjpeg) 流(来自网络摄像头)包装到 html5 画布中.我知道 Safari 和 Chrome 对 mjpeg 具有原生支持，因此我可以将其放入 img 以使其工作.我想将它包裹在画布中的原因是我想对其进行一些后期处理. 我知道我可以使用 drawImage 来加载图像(和 mjpeg): ..
发布时间：2022-01-17 11:47:23 其他开发

缩放 HTML5 画布宽度保留 w/h 纵横比

我有一个尺寸为 979X482px 的画布元素，我想让它拉伸以适应任何给定浏览器窗口的宽度，保持宽度/高度的纵横比为 1 比 1，我希望高度相对缩放到画布的宽度.关于如何使用 javascript/jQuery 执行此操作的任何建议? 解决方案 首先你将画布的宽度设置为100% $('#canvas').css('width', '100%'); 然后根据它的宽度更新它的高度 $(w ..
发布时间：2022-01-17 11:47:18 前端开发

中间有洞的多边形，带有 HTML5 的画布

使用 标签我需要能够在多边形中绘制一个洞. 现在我有一些非常简单的方法，它使用 beginPath() 然后为每个点执行 lineTo().然后用 fill() 填充. 我看不出有什么方法可以让一个填充的多边形中间没有填充，就像一个甜甜圈.我不是在做甜甜圈，但它适合这个例子. 我有什么遗漏吗?我宁愿不把它画满，然后不得不重画中间. 解决方案 这是我做的: ..
发布时间：2022-01-17 11:47:11 前端开发

GWT:如何移除 Canvas Widget 的焦点指示器?

我使用以下方法创建了一个画布: Canvas canvas = Canvas.createIfSupported(); 并通过以下方式将其添加到 DOM: RootPanel.get("canvasContainer").add(canvas); 当我在 Chrome 中打开页面并单击它时，它会以橙色焦点边框突出显示.在 Android 浏览器中，当触摸画布时，整个画布会以半透明的蓝色叠加 ..
发布时间：2022-01-17 11:47:02 其他开发

在带有背景的画布上书写文本

是否可以在画布上写图像并用背景写文本?比如这样: 解决方案 文本在画布中的工作原理 很遗憾，您不能使用 text 方法生成带背景的文本 - 只能填充或勾勒文本本身. 这是因为字体(字体)中的字形会根据需要转换为单独的形状或路径，其背景将是字形本身的内部部分(使用填充时看到的部分).除了使用其几何位置之外，字形使用的黑盒(字形适合的矩形)没有层，因此我们需要自己提供一种黑盒和轴承 ..
发布时间：2022-01-17 11:46:54 前端开发

Html5 Canvas 变换算法 - 应用变换后查找对象坐标

在 html5 画布上，我正在绘制对象(矩形、圆形等...)，这些对象具有缩放、倾斜、旋转等变换属性...这些对象可以嵌套. 问题发生在我应用转换后，我想找到给定对象的精确 x、y 坐标，但它超出了我的想象. 致所有从事交互式计算机图形学的专家；请帮我解决这个问题. 提前致谢. 解决方案 二维中的所有仿射变换都可以表示为如下形式的矩阵: [ a c dx ]T = [ ..
发布时间：2022-01-17 11:46:35 前端开发

使用没有服务器端代码的 javascript 将 html 文本渲染为位图

我需要使用 javascript 代码来转换文章，html 中的帖子以位图的形式显示给最终用户，有没有办法做到这一点，无需服务器端代码? 示例: 在这里测试文本.... 解决方案 您可以使用例如 html2canvas 来将您的页面转换为位图. 如果您的 HTML 不包含任何外部引用，您也可以使用我的以下函数: /*** 画布扩展:drawHTMLText(tx ..
发布时间：2022-01-17 11:46:26 前端开发

如何在画布中填充图案并沿形状弯曲?

我有一张这样的图像 我想用这样的图案填充 得到这样的结果 . 我可以使用以下代码填充图案，但我不知道如何沿着衣领形状正确弯曲图案，因为它应该看起来像真的，但我的结果变成了这样.. 这是我的示例脚本 $(function(){drawCanvas("body","collar","images/collar.png", 180);函数drawCanvas(overlayType，can ..
发布时间：2022-01-17 11:46:18 前端开发

在画布中制作可点击区域以更改图像

请帮帮我: 在下面的画布中创建可点击区域，我可以将 onmousedown= 事件分配给这些区域.我知道如何用不可见的 DIV 做到这一点，但我认为有一种更优雅的方式可以在我不知道的画布中做到这一点. 当我单击其中一个区域时，想要将图像名称传递给函数，以便它将正在显示的图像更改为另一个图像，然后将其更改回 onmouseup. 如果您只给我展示一个区域和一个 mousedown/ ..
发布时间：2022-01-17 11:46:08 前端开发

将 html5 画布输出保存到我​​的 rails 应用程序

我正在尝试将 html5 画布的内容保存到我的 Rails 应用程序中.我找到了 var url = canvas.toDataURL('image/png'); 但我不知道如何将其放入我的帖子/表单中. 我使用carrierwave 来处理图像，但我希望用户在画布上绘制一个图像，而不是上传图像. 我正在考虑将表单的输入文件设置为此内容，但这似乎不是它的工作方式 或者我不应该 ..
发布时间：2022-01-17 11:45:54 其他开发

消除 HTML5 画布元素下方的幽灵边距?

当我们创建 HTML5 画布元素时，即使我们将边距和内边距设置为 0，画布元素下方也会出现幻影边距. 示例:http://jsfiddle.net/yvbmd/ 我们尝试了各种方法，但无法擦除鬼边. 我们如何创建没有幽灵边距的画布元素? 解决方案 添加vertical-align: bottom. 这是由于画布是内联元素造成的.因此，它实际上被视为一个角色.因此，它 ..
发布时间：2022-01-17 11:45:07 前端开发

是否可以创建没有 DOM 元素的 HTML 画布?

我想要一个 HTML 画布上下文，我可以在屏幕外绘制和读取(在此示例中，编写文本和读取创建的形状，但这是一个普遍的问题).我可能还想使用画布作为屏幕外帧缓冲区. 我想我可以创建一个隐藏的 DOM 元素，但我宁愿从 JavaScript 创建它(我可能想在运行时创建和销毁一些画布). 可能吗? 解决方案 您可以使用 document.createElement 创建一个新的 ca ..
发布时间：2022-01-17 11:44:59 前端开发

如何使用 JavaScript/jQuery 选择图像的多边形区域?

我希望能够让我的用户选择他们上传的图像的特定多边形(点之间有曲线的 6-8 个顶点)区域 - 我如何使用 HTML5 和JS?我发现的唯一库允许纯矩形选择:http://odyniec.net/projects/imgareaselect/ 解决方案 已经有一个库可以满足您的部分需求:polyclip.js, by Zoltan Dulac 你可以构建一个 UI 允许用户选择点，然后将数据 ..
发布时间：2022-01-17 11:44:47 前端开发

更改图像的特定区域并在该区域填充颜色

编辑 Png 图像，例如更改特定区域并在该区域填充颜色. 我想更改图像仅选定区域的颜色.就像第一个用户选择了一种颜色，然后他选择了一个图像，然后他可以用所选颜色更改图像的特定区域. 之后他也可以保存那个图像.有可能吗??像Color公司的网站就用这种东西. 如下网址 https://www.sherwin-williams.com/visualizer#/active 解决 ..
发布时间：2022-01-17 11:44:30 PHP

将画布内容序列化为 ArrayBuffer 并再次反序列化

我有两个画布，我想把canvas1的内容传过来，序列化到一个ArrayBuffer中，然后加载到canvas2中.以后我会把canvas1的内容发送到服务器，处理后返回给canvas2，但是现在只想序列化和反序列化. 我发现了这种以字节为单位获取画布信息的方法: var img1 = context.getImageData(0, 0, 400, 320);var binary = new ..
发布时间：2022-01-17 11:43:54 前端开发

如何提高我的 Html5 Canvas 路径质量?

我一直在编写一个小的 javascript 插件，但在提高画布的整体渲染质量方面遇到了一些麻烦.我在网上到处搜索，但找不到任何有意义的东西. 从我的曲线创建的线条并不平滑，如果你看看下面的 jsfiddle 你就会明白我的意思.它看起来有点像素化.有没有办法提高质量?或者是否有一个 Canvas 框架已经使用了一些方法来自动提高我可以在我的项目中使用的质量? 我的画布渲染 不确定 ..
发布时间：2022-01-17 11:43:48 前端开发