html5-canvas相关内容

Canvas.toDataURL() Uncaught TypeError: undefined is not a function

我正在使用一个名为 html2canvas 的插件将我页面上的一些 html 转换为画布元素.然后我想将该画布保存为图像.不幸的是,我一直遇到标题中的错误.我尝试过使用不同的变量名、不同的 html 等.但一直遇到相同的错误.这是我的代码(点击按钮触发): JS function generate(){html2canvas($('#b2_1'), {渲染:函数(画布){canvas.se ..
发布时间:2022-01-17 12:01:18 前端开发

用 css 样式覆盖的画布内联高度和宽度属性.这是一个错误吗?

我最近问了一个问题 关于如何在不裁剪的情况下将比我的画布更大的图像绘制到画布上,并在对其进行一些更改后将图像保存回其原始尺寸.我发现解决方案是为画布设置大于图像的内联 height 和 width 属性,并使用 css height 和 width 属性来设置画布的样式以适合您的布局. 例如,假设我的图像的尺寸范围在 400 像素到 2000 像素之间.但我不希望画布太大,也不希望图像也被裁 ..
发布时间:2022-01-17 12:01:09 其他开发

Unicode 字符无法在 HTML5 画布中正确呈现

我正在尝试使用 HTML5 画布元素呈现 unicode 高音谱号.使用正确的字符代码(特别是 1D120)时,它在 HTML 中呈现良好,但是当我尝试在画布内使用它时,会出现一个奇怪的字符 以下代码在我的 javascript 文件中,它在画布上发挥了它的魔力... var canvas = document.getElementById('canvas');var context ..
发布时间:2022-01-17 12:00:29 前端开发

在画布上调整照片大小而不丢失纵横比

大家好,感谢您提前提供的任何帮助.我正在编写一个 phonegap 应用程序,并且无法在不丢失外观或错误裁剪图像的情况下缩小照片.在下面的函数中,“imageData"是相机拍摄的照片的 64 位字符串.我可以在我的页面上将图像绘制到画布上,但如果图片是横向拍摄的,那么它会被粉碎在一起.如果我不使用 scale 函数或 drawimage 函数对其进行缩放,那么我只会得到照片的顶角.一个例子:我拍 ..
发布时间:2022-01-17 12:00:20 前端开发

使移动 Rect 更流畅

我想让我的 Rect 的“动画"更流畅.目前它真的很笨重.我知道它的原因.其中一个坐标在另一个之前成为想要的值. 例如,如果我目前在 (0,0) 并且我需要转到 (150,75) 并且我每秒平均递增每个,那么 y-cord 将比 x-cord 来得更快. var canvas = document.getElementById('canvas');var ctx = document. ..
发布时间:2022-01-17 12:00:13 前端开发

html画布中图像的主色转换

在使用画布工作/学习数小时后,我设法获得了图像克隆和像素,现在我让用户从颜色光谱中选择一种颜色,并且我的函数中有该颜色十六进制: move: 函数(颜色){//'color' 是用户选择的值var img_id = jQuery(".selected_bg_img").attr("id");警报(img_id);变量 x = 0;变量 y = 0;变量宽度 = 409;变量高度 = 409;va ..
发布时间:2022-01-17 11:59:59 前端开发

使用 HTML5 画布为颜色选择创建渐变(所有可能的 RGB 颜色)

是否可以为线性颜色选择器增加包含所有可能的 RGB 颜色(只有红色、绿色、蓝色 - 没有 alpha 值)的线性渐变. 到目前为止,我已经尝试使用以下渐变,但它不包含从 rgb(0,0,0) 到 rgb(255,255,255) : var grd = ctx.createLinearGradient(0, 0, width, 0);grd.addColorStop(0, 'red');g ..
发布时间:2022-01-17 11:59:37 其他开发

Konva - 使用旋转并保持在界限内

我正在使用 Konva 在网页上创建一个区域.我为我的矩形创建了一个 dragBoundFunc 函数,检查 pos.x 和 pos.y 以及 canvas 和 rect 的宽度,这工作正常 - 矩形仅在拖动时停留在该区域中. 当我将矩形旋转 90 度时,我的问题就出现了.现在,当我检查 getClientRect().width 和 getClientRect().height 时,宽度小 ..
发布时间:2022-01-17 11:59:28 前端开发

HTML5 Canvas - 混合多个 translate() 和 scale() 调用

我只是想知道 Canvas 转换是如何工作的.假设我有一个画布,里面有一个圆圈,我想缩放圆圈,所以它的中心点不会移动.所以我想到了做以下事情: 翻译(-circle.x, -circle.y);比例(因子,因子);翻译(circle.x,circle.y);//现在,通过调用 arc() 和 fill() 绘制圆 这是正确的方法吗?我只是不明白画布是否旨在记住我称之为转换的顺序. 谢谢. ..
发布时间:2022-01-17 11:59:12 前端开发

如何使用 jQuery/CSS3 创建“滑入式画廊面板"?

通常我知道如何开始,有一些教程甚至经验,但此时我什至不知道如何称呼它.也许仅仅通过告诉我如何正确定义它就可以解决我的问题(-> 根据名称,我可以正确搜索). 让我们给你这个我刚刚制作的快速模型. 我正在寻找 1:你怎么称呼它,尤其是 2:我将如何创建这样的? 我想创建几个叠放在一起的面板,然后单击每个面板上的“下一步"按钮,您可以将该面板向左(或向右(向后))移动到下一个图块.假 ..
发布时间:2022-01-17 11:59:05 前端开发

HTML5画布drawImage使用点?

我需要使用 4 个点来绘制图像.我将这 4 个点存储在一个数组中,这些位置会发生变化.现在我需要绘制一个反映这些位置的图像.context.drawImage 只接受 1 个位置. 应该是这样,4个位置: x,y----------x,y||||||||||x,y---------x,y 解决方案 你要找的就是用 3D 渲染语言画一个四边形. 您通常将形状拆分为 2 个三角形(面 ..
发布时间:2022-01-17 11:58:03 前端开发