canvas 第10页 - IT屋-程序员软件开发技术分享社区

使用画布元素使用 javascript 调整图像大小

我很难理解如何在 JavaScript 中使用 canvas 元素. 我正在实现一个调整大小的功能，用户可以在 lightbox 内调整图像大小.lightbox 将在单击预览图像后启动.在 lightbox 元素中，除了图像本身之外，还有宽度和高度两个输入字段. 目标是生成base64格式的原始图像的副本，并将其连同给定的宽度和高度作为查询参数发送到服务器，并让服务器端进行调整大小操 ..

发布时间：2022-01-17 11:30:04 javascript image canvas html5-canvas 前端开发

在 HTML5 画布上动画绘制路径

我的问题是如何为两点之间的路径绘制动画. 考虑两点之间的曲线或路径，A &B. 我可以使用 Konvajs 中的线条绘制功能在画布上轻松绘制. 但是，我真正想要的是对线的显示进行动画处理，使其从 A 点开始并逐渐绘制到 B 点.显示应该是动画的，这样我就可以应用令人愉悦的缓动. 作为一个比较示例，请参阅本网站 https://coggle.it/ 上的简短视频，其中视频展示了新盒 ..

发布时间：2022-01-17 11:29:58 javascript canvas html5-canvas konvajs 前端开发

如何从 html 画布中取消绘制、隐藏、删除或删除图像?

this.context.drawImage(myimage, 0, 0); 将图像放在画布上已经很好地覆盖了整个网络.但是出现后如何删除呢? 解决方案选项1: 在其上绘制一个与背景颜色相同的矩形. 选项 2(适用于非平凡背景，但速度较慢): 在绘图前从画布中获取像素数据图像，然后重绘该像素数据以移除图像. ..

发布时间：2022-01-17 11:28:31 html canvas html5-canvas 前端开发

在 HTML5 画布中绘制鼠标移动的半透明线

我试图让用户通过在画布上绘制半透明线条的“绘画"工具在区域上绘画来指定区域.其目的是为将在画布下方绘制的图像指定一个“蒙版". 这是我迄今为止尝试过的: var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var canvasPos = canvas.getBoundingClie ..

发布时间：2022-01-17 11:27:42 javascript html canvas drawing html5-canvas 前端开发

画布旋转后查找坐标

0 到 0,-70 通过这个: ctx.strokeStyle = "red";ctx.lineWidth = 2;ctx.rotate(Math.PI/-10;);ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,-70);ctx.stroke(); 我可以将其旋转“PI/-10"，这样就可以了. 使用旋转后如何获得 x,y 点? 解决方案 ..

发布时间：2022-01-17 11:27:11 javascript html canvas html5-canvas 前端开发

使用 SVG 路径数据在 Canvas 中绘制路径(SVG 路径到 Canvas 路径)

我有一张 SVG 中一个国家/地区的详细地图，以这种格式分隔在多个区域中: (而且我有很多这样的路径.) 现在我需要通过 Canvas 完成所有这些工作(因为需要重新设计和完成一项全新的任务).我看到可以在 Canvas 中绘制路径，但我可以使用这样的 SVG 路径来绘制路径吗? 解决方案在 Chrome、Safari、Firefox 和 Edge 中，您可以使用 Path2 ..

发布时间：2022-01-17 11:24:51 html canvas svg html5-canvas 前端开发

以为我有这个，但没有.目标:拍一张照片(保险卡)，将其保存在本地，稍后再检索. //获取图片元素的引用var 大象 = document.getElementById("SnapIt_mobileimage_5");var imgCanvas = document.createElement("canvas"),imgContext = imgCanvas.getContext("2d");// ..

发布时间：2022-01-17 11:23:52 javascript cordova jquery-mobile canvas html5-canvas 前端开发

HTML画布&Javascript - 通过选择(从多个地方)触发音频

我的 HTML 画布中有一个选择菜单，我想触发相应的音频文件.我尝试通过在 if (this.hovered) & 中声明图像来实现这一点selectionForMenu 原型中 makeSelection 函数的 (this.clicked) 部分，这样在每次新选择时都会重新定义选定的音频文件，但这会导致加载缓慢和重叠的音频.这也是有问题的，因为我试图让屏幕底部的扬声器按钮也播放与当前选择相对应 ..

发布时间：2022-01-17 11:22:57 javascript html canvas html5-canvas 前端开发

使用新数据更新每个 AJAX 请求的 HTML 画布标签

如果找到新用户或现有用户有新连接，我想在每个 AJAX 请求上更新我的画布. 我有用户和他们之间的联系: var data=[{“身份证":38，“连接":[39,40]，“名称":“ABC"},{“身份证":39，“连接":[40]，“名称":“pqr"},{“身份证":40，“连接":[]，“名称":“lmn"}] 在上面的示例中，具有 Id:38 的用户连接到 user 39 和 ..

发布时间：2022-01-17 11:22:08 javascript jquery html canvas html5-canvas 前端开发

如何实现 SVG 的 preserveAspectRatio="xMinYMin slice";用于画布的 drawImage 方法.

是否有在画布中为 drawImage() 方法实现 SVG 的 preserveAspectRatio="xMinYMin slice" 的解决方法? 解决方案肯的回答在标记为重复的答案中确实与 xMinYMin slice 执行相同的操作，如果您将其称为 drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height,0, 0). ..

发布时间：2022-01-17 11:18:48 javascript canvas svg html5-canvas 前端开发

具有 HTML5 画布的更高 DPI 图形

在使用 HTML5 画布创建图像时，是否可以设置自定义 DPI/PPI?我知道如何在画布上绘制并将其导出为图像，但如何确保输出图像具有特定的 DPI/PPI.我想使用 SVG 元素在画布上绘制是一种方法，但是当我将整个画布导出为图像时，这不会变平吗?或者计算设备 DPI，然后缩放图像以满足我的 DPI 要求，但这似乎不是正确的解决方案. 解决方案你不能(呃)在任何浏览器中访问当前网页显示 ..

发布时间：2022-01-17 11:17:49 javascript html canvas html5-canvas 前端开发

将svg转换为png时如何包含CSS样式

我创建了一个简单的 SVG 元素，在单击按钮时会下载到 png，我的解决方案类似于这里基本思路是: 1.svg 到画布 2.canvas转dataUrl 3.触发从dataUrl下载问题是在下载 png 文件时，它不包含应用于 svg 的 css 样式我的解决结果注意 - 我知道通过在元素上移动样式“内联"(如 here 或通过挖掘 DOM 树并使用 getComp ..

发布时间：2022-01-17 11:17:19 css canvas svg html5-canvas png 前端开发

通过 canvas.toDataURL 将画布保存到图像会导致黑色矩形

我正在使用 Pixi.js 并尝试将动画帧保存到图像中.canvas.toDataUrl 应该可以工作，但我得到的只是一个黑色矩形.查看现场示例这里我用来提取图像数据并设置图像的代码是: var canvas = $('canvas')[0];var context = canvas.getContext('2d');$('button').click(function() {var ..

发布时间：2022-01-17 11:16:58 javascript canvas html5-canvas webgl pixi.js 前端开发

及时绘制 HTML5/Javascript 画布路径

JavaScript canvasHolder = document.getElementById('canvas');上下文 = canvasHolder.getContext('2d');context.fillStyle = '白色';var w = canvasHolder.width，h = canvasHolder.height；context.fillRect(0, 0, w, h ..

发布时间：2022-01-17 11:16:48 javascript canvas html5-canvas 前端开发

如何使用画布和 javascript 像素化图像

我一直在用画布元素做一些试验，很好奇如何实现效果. 我从一系列教程和演示中得到了一些我想要的东西，但我需要一些帮助才能完成剩下的工作.我正在寻找的是在 mouseover 上像素化图像，然后在 mouseout 上重新聚焦/取消像素化.当鼠标悬停在 http://www.cropp.com/主轮播下方的块. 这是我开始的指向小提琴的链接.小提琴不起作用，因为您不能使用跨域图像(womp ..

发布时间：2022-01-17 11:16:22 javascript canvas html5-canvas 前端开发

addEventListener 用于 Canvas 上的 keydown

我正在尝试制作一个响应键盘和鼠标输入的画布应用程序.我有这个代码: canvas = document.getElementById('canvas');canvas.addEventListener('mousedown', function(event) {警报('mousedown')；}，错误的);canvas.addEventListener('keydown', function( ..

发布时间：2022-01-17 11:15:39 javascript html canvas html5-canvas 前端开发

如何在 HTML5(或 Fabric.js)中制作屋顶文字效果和山谷文字效果

我正在使用以下代码: // ..

发布时间：2022-01-17 11:14:00 html canvas html5-canvas fabricjs 前端开发

在画布上的图像不透明部分周围绘制边框

我正在使用 drawImage 在画布上绘制图像.这是一个被透明像素包围的PNG，如下所示: 如何为画布上该图像的可见部分添加纯色边框?澄清一下:我不想要一个围绕图像边界框的矩形.边界应该绕过草地. 我确实考虑过使用阴影，但我真的不想要一个发光的边框，我想要一个实心的. 解决方案有点晚了，不过画个图offset，比分析边缘快很多: var ctx = canvas.ge ..

发布时间：2022-01-17 11:13:45 javascript image canvas html5-canvas border 前端开发

我想沿特定路径对对象进行动画处理

我必须移动路径上的小矩形.在画布内单击后，矩形会移动. 我无法为它设置动画，因为对象只是跳转到所需的点. 请在 Fiddle 上找到代码. HTML CSS #myCanvas {宽度:578px；高度:200px；边框:2px 细；} JavaScript var ..

发布时间：2022-01-17 11:12:50 javascript jquery canvas html5-canvas 前端开发

HTML5 Canvas 相机/视口 - 如何实际做到这一点?

我确信这已经解决了 1000 次:我有一个 960*560 大小的画布和一个 5000*3000 大小的房间，其中始终只应绘制 960*560，具体取决于球员是.玩家应该始终在中间，但是当靠近边界时 - 应该计算最佳视图).玩家可以使用 WASD 或箭头键完全自由移动.并且所有对象都应该自己移动 - 而不是我移动除了玩家之外的所有东西来创造玩家移动的错觉. 我现在找到了这两个问题: H ..

发布时间：2022-01-17 11:11:59 javascript html canvas html5-canvas viewport 前端开发

canvas相关内容