分组和取消分组 Fabric.js 对象
我使用 fabric.js 创建了一种“多边形选择器"或“多边形制造器".每次单击都会创建多边形的一个角，可以选择、移动等...双击原点“关闭"多边形.在这一点上，我将构成多边形的所有圆/线分组并将它们分组.到目前为止一切顺利. 当双击这样的组时，我希望它取消组合并恢复为可移动节点(即移动圆圈会重塑多边形等)；但是发生了一些奇怪的事情 - 看看当你移动圆圈时会发生什么，某些线似乎“没有加入"
..
html5-canvas相关内容
使用 javascript 中的 mousemove 事件在画布内的图像上绘制矩形
我正在尝试使用 mousemove 事件在画布内的图像上绘制一个矩形.但是由于 clearRect ，我在图像上得到了矩形，矩形中填充了颜色.谁能弄清楚我.如何在图像上绘制一个只有边框的矩形.下面是我实现它的代码. var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d'),矩形 = {}，拖动=假
..
如何制作类似于 Google Doodle 的神秘博士的 HTML5 游戏?
我搜索了玩神秘博士 HTML5 游戏的 Google Doodle 首页上的代码.我想知道 Google 团队使用什么游戏引擎(如有必要)? 解决方案 我找到的关于 Google Doodles 的最佳技术文章是这篇: 案例研究:构建 Stanisław Lem Google 涂鸦 本文由 Google 的高级用户体验设计师 Marcin Wichary 撰写，他为一些 Goo
..
Fabricjs HTML5 Canvas:为什么图像大小调整得这么差?
当我将 775 x 775 的图像添加到 fabricjs 画布并将其调整到大约 90 x 90 时，图像的质量会大大降低. 但是，如果我将相同的图像添加为 并将其缩小，它会保留其质量. 为什么画布图像变得如此低质量?如何使画布图像像 一样保持其原始质量? 解决方案 应该可以去评论一下，可惜我是新手，不能加评论.但是，对我来说，这看起来像是抗锯齿问题
..
在 Fabric.js 中克隆对象
我正在使用一个简单的函数在 Fabric.js 的画布上克隆一个选定的对象. function duplicateObj() {var obj = canvas.getActiveObject();var clone = fabric.util.object.clone(obj);clone.set({left: 100,top: 100});canvas.add(克隆);} 这绝对没问题.现
..
如何检测通过画布生成的图像是否为空白(透明 PNG)?
我正在开发一个应用程序，其中在 HTML5 画布上创建/编辑图像，然后将其保存到文件存储/云中.问题在于“节约效率".在保存空白画布时，即使用 toDataURL() 发送完全透明的空白 PNG.检测空白 PNG 的一种方法是在单击任何编辑/绘图功能时切换布尔值并在清除屏幕时重置该值. 但是，这种方法并非万无一失，因为用户可能会在单击绘图/编辑功能后保存图像，但不会绘制任何内容.是否有更原生
..
如何从 Instagram 的 media_preview 原始数据重新创建预览?
如果您从 Instagram 的 API 获取 JSON 数据，您会发现一个 media_preview 键，其值是一些 Base64 编码的数据.它真的看起来像一些非常小的预览二进制数据.可能被压缩了. 以这篇文章为例.它只是一个黑色方块，它的预览非常小.查看 它的 JSON:data['graphql']['media_preview'] = "ACoq5miiigAooooAKKKKA
..
为什么说 WebGL 是 2D API，而不是 3D API?
根据 HTML5 Rocks，WebGL 实际上是 2D API，而不是 3D API.他们为什么这么说，这是什么意思? 我们可以在 WebGL 顶点着色器和片段着色器中指定 X、Y、Z 坐标.我无法理解 2D 和 3D 图形 API 之间的区别.你能解释一下为什么他们说这是一个 2D API 吗? 解决方案 WebGL 是光栅化 API 而不是 3D api.您必须为其提供投影坐标
..
使用 JsPDF 将 Canvas 转换为 Pdf
我正在尝试将画布转换为 pdf，但结果是干净的白色 pdf这是代码，我无法弄清楚我错过了什么.. 函数 HtmlToImage(){html2canvas(document.body, {渲染:函数(画布){var img =canvas.toDataURL("image/jpeg,1.0");var pdf = 新的 jsPDF();pdf.addImage(img, 'JPEG', 0, 0
..
HTML5 Canvas 避免任何亚像素渲染
如 这里所见.画布中的亚像素精度问题很少.现在我有更多.我正在尝试渲染硬边等距正方形，如我提供的链接中的图像所示.试图稍后处理渲染图像中的像素数据并提取当前颜色. 但是由于亚像素问题，我收到了原始图像中实际不存在的颜色！而且无论我似乎从哪里开始画你在图像中看到的线(无论是从 [1,1] 到 [10,10] 还是从 [1.5, 1.5] 到 [10.5, 10.5]，这只是一个例如)我总是得到
..
HTML5 画布抗锯齿?
我正在尝试用画布绘制二次曲线.这是代码: HTML: 不支持您的浏览器. JavaScript: var canvas = document.getElementById("mycanvas");canvas.style.width = "1000px";canvas.style.height = "1000px";如果(canvas.
..
ReferenceError:图表未定义 - chartjs
Chart.js 有错误吗?每次我将 Chart.js 中的任何图表添加到我的网站时都会出现错误，但是当我将该图表用作独立程序时，它可以顺利运行而没有错误.我正在使用 HTML5. 大米消费
..
如何用html5画布绘制一个连续的圆形图案
我有这张图片: 我想用图像 作为图案进行绘制.当我这样做时，我在画布上得到了这样的结果: 但我需要输出是 所以我的问题是: HTML
..
在画布上绘制(渐进式)油漆飞溅
我正在寻找一种简单的方法，它可以让我在画布上绘制 paint splash 像这样: 一种方法是发射很多小粒子，这会画一个小圆圈，但我不想管理很多粒子对象. 编辑:示例: jsfiddle.net/MK73j/4/ 第二种方法是使用少量图像并控制缩放和旋转，但我希望效果具有良好的随机性. 第三种方法是制作一些随机的小点，用贝塞尔曲线连接它们并填充内容，但我只有一个标记.
..
用“羽毛"剪裁帆布边缘效应
我目前正在将图像绘制到 HTML5 画布上并用弧线对其进行遮罩，在绘制图像之前调用 clip() 以便仅显示弧线中的部分.我怎样才能使这条弧的边缘羽化?我通过谷歌搜索知道没有简单的方法可以简单地将“羽毛"应用到用画布绘制的形状上.边缘接触弧线的图像的像素数据是什么?感谢您的帮助. 这是我的代码的相关部分: ctx.arc(canvas.width/2, canvas.height/2, 2
..
在 HTML5 Canvas 上绘制 1 像素线的完整解决方案
在 HTML5 画布上画 1 像素线总是有问题的.(参考 http://jsbin.com/voqubexu/1/edit?js,输出) 绘制垂直/水平线的方法是x+0.5,y+0.5(参考0 时的画布线条行为).要在全局范围内执行此操作，ctx.translate(0.5, 0.5); 将是一个好主意. 但是，当涉及到对角线时，这种方法不起作用.它总是给出一个 2 像素的线.有没有办
..
将 div 转换为可下载的图像
这是我用来将 div 转换为图像并使用 html2canvas.js 下载的代码
..
用于 UI 小部件的 HTML5 画布库
我一直在寻找一个库，它可以帮助嵌入在画布区域中的 UI 小部件的呈现和功能，例如组合框、复选框、单选按钮、文本区域、带有滚动条的列表框等，而无需通过将它们浮动在画布区域的顶部来叠加普通的 HTML 元素.Flex 为 Flash 提供了所有这些功能，并且有许多 Actionscript 库可以在 Flash“画布"(可以这么说)中创建 UI 小部件组件.这些 UI 小部件库在某些情况下为 Flas
..
使用 Fabric.js 选择画布上的所有对象
有没有办法显式选择在特定时间实例中存在的所有对象.这可以很容易地使用鼠标选择所有.是否有一个代码解决方案，例如一个名为 Select All 的按钮，以便单击它会使所有织物类型对象都被选中，然后我可以使用 canvas 将更改应用于整个 ActiveGroup.getActiveGroup(); 并迭代. 解决方案 好问题. 对此没有内置方法，但您需要按照以下方式进行操作: var
..
nodejs - 如何将文件中的图像数据添加到画布中
下面的代码应该读取一个图像文件，然后在 Canvas 模块的帮助下将文件数据添加到画布中. 当我运行此代码时，我收到错误消息图像未定义.我尝试从我简单导入的模块初始化的图像对象吗? var http = require('http'), fs = require('fs'),画布 = 要求('画布');http.createServer(function (req, res) {fs.re
..