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

防止画布对象发生碰撞或相交

我正在画布上绘制 n 个矩形.矩形是可拖动和可缩放的.我想防止它们重叠或相交.最好的情况是，如果它们只是相互对齐. 我想办法检查十字路口.在我的示例中，我将触摸对象的不透明度设置为 0.1. 巧合的是，在我尝试解决此问题时，我的对象在接触另一个对象时无法释放.请参阅 http://jsfiddle.net/gcollect/jZw7P/这是因为第 91 行没有执行警报.alert(ma ..

发布时间：2022-01-17 12:08:05 canvas html5-canvas collision-detection intersection fabricjs 其他开发

我在 jsfiddle 上创建了以下代码.目标是在单击后从画布中删除一个框.实际发生的是网格被清除并完全重新绘制，并在其旧位置删除了框.只有当所有给定的对象都被删除时，网格才会显示为空......我很困惑！我做错了什么? jQuery(函数(){GridBox = 新的 GridBox();GridBox.init();var canvas = GridBox.canvas;canvas.on( ..

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

围绕轴问题旋转画布

我正在使用 canvas 3d 绘制一个 3d 图形，我可以在其中绘制 (1,5,4)、(-8,6,-2) 等点.所以我能够绘制所有正面和负 x、y 和 z 轴.我也使用箭头键有旋转效果.旋转说明:z 轴从屏幕中心向外延伸. 要绕 x 轴旋转，请按向上/向下箭头键.要绕 y 轴旋转，请按左/右箭头键.要绕 z 轴旋转，请按 ctrl+left/ctrl+down 箭头键. 我可以通过在 ..

发布时间：2022-01-17 12:06:53 javascript html canvas graph html5-canvas 前端开发

清除后绘制图像时出现画布“形状伪影"

我的 Web 应用程序中有一个非常令人费解的画布工件/错误.清除画布后，在画布上绘制另一个图像时，先前已清除的圆形会重新出现，但只会出现一次.图像已像这样初始化一次: this.image = new Image();this.image.src = imageroot + image + '.png'; 在调试器中，我在每次绘制图像时都会中断，以发现此形状伪影仅在我第一次绘制此图像时出现. ..

发布时间：2022-01-17 12:06:20 canvas html5-canvas 其他开发

如何保护 HTML5/Canvas 游戏中的代码?

在流行的 HTML5/Canvas 游戏中，游戏制造商如何通过在网络浏览器中右键单击页面来防止访问者看到游戏代码?是否所有的游戏代码都在服务器上，而只有一小部分游戏代码在浏览器中，然后服务器和浏览器之间通过 Ajax、Websockets 或其他方式进行某种通信? 我很好奇，想了解更多?我正在使用 Canvas 学习 HTML5 游戏开发，我不想分享我花了这么多时间开发的所有代码.我该如何保 ..

发布时间：2022-01-17 12:05:53 html canvas html5-canvas 前端开发

javascript - Canvas 中的全屏矩形(Android/iOS 网络应用程序)

我在尝试使用 Canvas 在整个浏览器视口上渲染矩形时遇到问题.下面的代码在桌面上运行良好，但在移动设备上(在 iPad mini、Nexus 7 和 Galaxy S4 上测试)，矩形只填充了屏幕的一部分(在 iPad 上大约是一半，在其他设备上是三分之二). ctx.beginPath();ctx.rect(0, 0, window.innerWidth, window.innerHeig ..

发布时间：2022-01-17 12:05:02 javascript canvas web html5-canvas 前端开发

如何发现 canvas.requestFullscreen() 失败的原因?

手头的任务是为用 Dart 编写的 WebGL 应用程序添加对全屏模式的支持. canvas.requestFullscreen() 适用于简单的测试用例，但在整个应用程序上失败. 请指出阻止浏览器切换到全屏的原因. 代码是: void trapFullscreenError() {document.onFullscreenError.listen((e) {日志(“全屏错误: ..

发布时间：2022-01-17 12:04:33 canvas html5-canvas dart webgl fullscreen 其他开发

canvas.toDataURLWithMultiplier 不是函数

我正在尝试导出 4 倍于画布大小的图像. 与 var dataURL = canvas.toDataURL(); 我将图像设置为画布的大小但是当我尝试时 var dataURL = canvas.toDataURLWithMultiplier(4); 我收到错误“canvas.toDataURLWithMultiplier 不是函数" 下面是我的函数. $('.pre ..

发布时间：2022-01-17 12:04:14 javascript jquery canvas html5-canvas fabricjs 前端开发

KineticJS Canvas - 从中心点缩放组

我想扩展我的组(图像和其他内容). group.setScale(zoom, zoom); http://jsfiddle.net/K8nK3/ 但是当我扩展我的团队时，我认为它不是从我的团队中心扩展的.我觉得是这样我希望它像中心一样缩放我尝试了更多，但没有成功.我该怎么做呢，谢谢. 解决方案 [编辑以更好地满足提问者的需求] 以下是从中心点缩放动力学组 ..

发布时间：2022-01-17 12:03:58 javascript canvas html5-canvas kineticjs 前端开发

检测和响应任何多边形内的球壁碰撞

需要编写好的方法来检测和响应任何多边形内的球与墙碰撞. 例如，我有一个方法可以绘制一个在矩形内飞行的球. ctx.beginPath();ctx.arc(x, y, ballRadius, 0, Math.PI*2);ctx.fillStyle = "#0095DD";ctx.fill();ctx.closePath(); 检测和响应碰撞非常简单. if(x + dx > canvas ..

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

如何在画布中将图像像素转换为 s 曲线形状

我有这种类型的图像我希望我们在图像中看到的直线(实际上是像素)应该被转换为 S 曲线.我已经使用画布及其属性实现了 C 型曲线，但无法做 S 型曲线. 请帮帮我. 解决方案如果我理解正确，你希望每条垂直线都跟随一个“S"吗? 如果是这种情况，您可以使用 f.ex.Math.sin() 结合 drawImage() 及其裁剪参数以按像素列对图像进行切片，同时根据 sin ..

发布时间：2022-01-17 12:03:40 html canvas html5-canvas bezier 前端开发

context.drawImage 行为怪异

我有: 然后: var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');变种图像 = 新图像()；image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG ..

发布时间：2022-01-17 12:02:59 javascript canvas html5-canvas 前端开发

如何在 HTML5 的画布中复制形状?

我尝试使用 HTML5 构建一个半复杂且水平对称的形状.当我试图完成它时，我意识到如果我可以复制一半的形状，镜像并移动它以将两个图像连接在一起会更容易.我正在寻找有关如何镜像和移动形状的示例，而不是有关如何复制它的示例. 显然，我希望我不需要两个单独的画布元素. 这是我的参考代码: var canvas = document.getElementById(id),上下文 = canv ..

发布时间：2022-01-17 12:02:32 javascript html canvas html5-canvas 前端开发

使用 drawImage() 时，Canvas 的跨浏览器像素网格不一致

我认识到 Canvas drawImage 莫名其妙地偏移了 1像素是一个非常相似的问题，但我什至在遇到这个问题之前就已经应用了该问题的答案中给出的建议. 我正在为基于 HTML5 的游戏实现精灵表系统.单个框架的定义很简单: frame = new AnimationFrame(img, x, y, w, h); 在 AnimationFrame 构造函数中，所有数字参数都被截断为整 ..

发布时间：2022-01-17 12:02:07 javascript html canvas html5-canvas 前端开发

HTML5 Canvas 运动模糊效果?

我正在尝试使用 HTML5 画布制作类似运动模糊效果的东西，但没有成功. 基本上我想做的是拍一张照片，让它看起来像“快进"，就像你拍照并且人移动一样. 解决方案有几个画布库已经实现了各种模糊算法.EaselJS 已经独立实现了 x 轴和 y 轴模糊，如您所见在这个示例中. 您可能想要的只是他们库中的 x 轴模糊. ..

发布时间：2022-01-17 12:01:52 canvas html5-canvas blur motion 其他开发

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

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

发布时间：2022-01-17 12:01:09 canvas html5-canvas image-scaling 其他开发

如何检测单击后是否按住鼠标按钮一定时间

您好，我对 javascript 很陌生.我希望能够在用户单击画布上的点(短按)时触发一个事件，如果按住该单击 1500 毫秒，我应该有另一个功能.我应该在 mouseup 完成之前识别出长按. 例如: el.addEventListener("mousedown", doMouseDown, false);el.addEventListener("mouseup", update, fa ..

发布时间：2022-01-17 12:00:39 javascript canvas html5-canvas 前端开发

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

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

发布时间：2022-01-17 12:00:29 javascript html canvas unicode html5-canvas 前端开发

使移动 Rect 更流畅

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

发布时间：2022-01-17 12:00:13 javascript canvas html5-canvas 前端开发

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 javascript jquery canvas html5-canvas 前端开发

canvas相关内容