在 HTML5 画布上绘制 X 形状并检查与边框的冲突
我正在开发一个 HTML 5 迷宫游戏. 这是我用来在画布上绘制“X"的函数(使用触摸板，用户将通过迷宫导航 X). dim = 8;函数矩形(x，y，xdim){ctx.beginPath();ctx.moveTo(x - xdim, y - xdim);ctx.lineTo(x + xdim, y + xdim);ctx.moveTo(x + xdim, y - xdim);ctx.l
..
html5-canvas相关内容
javascript - Canvas 中的全屏矩形(Android/iOS 网络应用程序)
我在尝试使用 Canvas 在整个浏览器视口上渲染矩形时遇到问题.下面的代码在桌面上运行良好，但在移动设备上(在 iPad mini、Nexus 7 和 Galaxy S4 上测试)，矩形只填充了屏幕的一部分(在 iPad 上大约是一半，在其他设备上是三分之二). ctx.beginPath();ctx.rect(0, 0, window.innerWidth, window.innerHeig
..
如何发现 canvas.requestFullscreen() 失败的原因?
手头的任务是为用 Dart 编写的 WebGL 应用程序添加对全屏模式的支持. canvas.requestFullscreen() 适用于简单的测试用例，但在整个应用程序上失败. 请指出阻止浏览器切换到全屏的原因. 代码是: void trapFullscreenError() {document.onFullscreenError.listen((e) {日志(“全屏错误:
..
强制 iOS 从 HTML5 Canvas 下载图像(使用纯 javascript)
之前有人问过这个问题，一般的回答是在 iOS 上无法完成.但是这些问题已经存在好几年了，有可能已经开发了一种解决方法，或者现在有一种方法可以做到这一点. 我有一个可以工作的纯 JavaScript 图像编辑器，它不会让最后的编辑步骤(保存编辑的图像)发生在 iOS 中.很难相信这是不可能.所以，一个简单的问题:有没有办法将画布图像下载到 iOS 用户的移动设备? 编辑:我尝试将下面的第
..
使用浮点数时，fillRect() 不完全重叠
以下代码 (jsFiddle) 在画布上的随机点绘制一个红色方块，注意擦除前一个(通过用 ctx.fillRect() 填充一个白色方块: const ctx = document.getElementById('canvas').getContext('2d');让 prevRect = null;for (让 i = 0
..
canvas.toDataURLWithMultiplier 不是函数
我正在尝试导出 4 倍于画布大小的图像. 与 var dataURL = canvas.toDataURL(); 我将图像设置为画布的大小 但是当我尝试时 var dataURL = canvas.toDataURLWithMultiplier(4); 我收到错误“canvas.toDataURLWithMultiplier 不是函数" 下面是我的函数. $('.pre
..
KineticJS Canvas - 从中心点缩放组
我想扩展我的组(图像和其他内容). group.setScale(zoom, zoom); http://jsfiddle.net/K8nK3/ 但是当我扩展我的团队时，我认为它不是从我的团队中心扩展的.我觉得是这样 我希望它像中心一样缩放 我尝试了更多，但没有成功.我该怎么做呢，谢谢. 解决方案 [编辑以更好地满足提问者的需求] 以下是从中心点缩放动力学组
..
检测和响应任何多边形内的球壁碰撞
需要编写好的方法来检测和响应任何多边形内的球与墙碰撞. 例如，我有一个方法可以绘制一个在矩形内飞行的球. ctx.beginPath();ctx.arc(x, y, ballRadius, 0, Math.PI*2);ctx.fillStyle = "#0095DD";ctx.fill();ctx.closePath(); 检测和响应碰撞非常简单. if(x + dx > canvas
..
如何在画布中将图像像素转换为 s 曲线形状
我有这种类型的图像 我希望我们在图像中看到的直线(实际上是像素)应该被转换为 S 曲线.我已经使用画布及其属性实现了 C 型曲线，但无法做 S 型曲线. 请帮帮我. 解决方案 如果我理解正确，你希望每条垂直线都跟随一个“S"吗? 如果是这种情况，您可以使用 f.ex.Math.sin() 结合 drawImage() 及其裁剪参数以按像素列对图像进行切片，同时根据 sin
..
如何在从 jsPDF 生成的 PDF 中添加水印?
我正在从 canva 生成 PDF 并使用 jsPDF 生成它. https://github.com/MrRio/jsPDF 这是我正在使用的代码，我想在页面中添加水印.任何人都可以帮助我吗? self.downloadCanvasObjectAsPDF = function () {canvas.deactivateAll().renderAll();尝试 {canvas.ge
..
如何在 dragstart 之前缓存整个图层并将其还原回 dragend?
我目前正在尝试加快我的移动设备网络应用程序的速度，但现在我被困在最重要的部分 - 缓存上.如何在用户开始拖动之前缓存整个图层并在拖动动作停止时将其恢复为可用的 Kinetic.Nodes? 目前我开始缓存 stage.on('mousedown touchstart', function(){//CACHING}) 但这里的问题是，用户必须执行第二个 mousedown touc
..
context.drawImage 行为怪异
我有: 然后: var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');变种图像 = 新图像()；image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG
..
如何在 HTML5 的画布中复制形状?
我尝试使用 HTML5 构建一个半复杂且水平对称的形状.当我试图完成它时，我意识到如果我可以复制一半的形状，镜像并移动它以将两个图像连接在一起会更容易.我正在寻找有关如何镜像和移动形状的示例，而不是有关如何复制它的示例. 显然，我希望我不需要两个单独的画布元素. 这是我的参考代码: var canvas = document.getElementById(id),上下文 = canv
..
上传前获取 toDataUrl() 图像的大小?
我正在使用画布在上传图像之前对其进行处理、裁剪、调整大小和优化. 我正在使用 toDataUrl() 方法来获取图像数据一旦被操作.我有这个 base 64 编码的 PNG url. 我一开始就知道图片的文件大小，但不确定如何在裁剪后获取图片的文件大小等...不上传图片. 据我所知，获取数据 url 的长度似乎与图像大小无关......而且我不确定如何获取我正在寻找的信息:图像数
..
context.filter 在 Safari 上不起作用
我正在使用 react 和 safari 构建绘图应用程序，context.filter 无法正常工作.在下面找到 chrome 和 firefox 上的渲染以及 safari 上的渲染.safari 有没有替代方案? 解决方案 safari 中不支持 Context.filter https://developer.mozilla.org/en-US/docs/Web/API/Ca
..
使用 drawImage() 时，Canvas 的跨浏览器像素网格不一致
我认识到 Canvas drawImage 莫名其妙地偏移了 1像素 是一个非常相似的问题，但我什至在遇到这个问题之前就已经应用了该问题的答案中给出的建议. 我正在为基于 HTML5 的游戏实现精灵表系统.单个框架的定义很简单: frame = new AnimationFrame(img, x, y, w, h); 在 AnimationFrame 构造函数中，所有数字参数都被截断为整
..
了解画布如何将图像转换为黑白
我发现了这个用于将图像转换为黑白的脚本，效果很好，但我希望能更好地理解代码.我将我的问题以注释的形式放在代码中. 谁能更详细地解释一下这里发生了什么: function grayscale(src){//用彩色图像的灰度版本创建一个canvas元素var canvas = document.createElement('canvas');var ctx = canvas.getContex
..
HTML5 Canvas 运动模糊效果?
我正在尝试使用 HTML5 画布制作类似运动模糊效果的东西，但没有成功. 基本上我想做的是拍一张照片，让它看起来像“快进"，就像你拍照并且人移动一样. 解决方案 有几个画布库已经实现了各种模糊算法.EaselJS 已经独立实现了 x 轴和 y 轴模糊，如您所见 在这个示例中. 您可能想要的只是他们库中的 x 轴模糊.
..
在画布上绘图时偏移
有一个简单的绘图应用程序.问题在于坐标(redraw 函数):它们必须是鼠标，但接近 2x 鼠标.代码有什么问题? 身体{背景颜色:绿色；}#工作区{宽度:700px；高度:420px；边距:40px 自动 20px 自动；边框:黑色虚线 1px；}#帆布{背景:白色；宽度:100%；高度:100%；}
..
mailto 不适用于大型正文内容
我正在尝试使用 mailto 函数在我的 Web 应用程序中获取 Outlook 窗口，使用以下代码. 发送邮件 如果 bodyText 少于 1800 个字符，它可以正常工作.但它会截断超过 1800 个字符的数据.如果正文内容超过 1800，则 Outlook 窗口仅显
..