草庐IT

Canvas-EventSystem-Panel

全部标签

javascript - 打开 Canvas 菜单后如何将背景位置保持在同一位置?

我有一张背景图片,可以在这里看到https://www.nova969.com.au/win/novas-sending-you-ed-sheeran图像是正文的背景图像。打开Canvas外菜单时,背景图像会移动。我想让背景图片保持在打开背景图片之前的确切位置。您会注意到正文中有以下cssbody.has-background{background-image:url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);}当Canvas外打开时,会导致背

HTML5 Canvas 合成(源代码)

我正在尝试使用Canvas在HTML5中重新创建翻页类型的动画。动画基于thispage的想法.但这并不重要。我遇到的问题是使用“source-in”复合操作没有给我预期的结果,我想澄清原因。我认为它只适用于chrome,不适用于FF3.6。黑色矩形应该作为翻页的“掩码”。我只想看到与mask重叠的区域的翻页。问题是绘制了整个黑色矩形,而不仅仅是它们重叠的区域。我知道HTML5还没有真正被使用,我只是为了我的个人网站和好奇心而试验。任何想法将不胜感激。 最佳答案 Canvas合成支持已损坏,在某些浏览器中可能仍然不完整。比较imag

HTML Canvas 作为 Google map 中的叠加 View

是否有谷歌地图的任何示例,其中有一个大Canvas作为叠加View。每本地图缩放或平移时,我都很难定位Canvas。 最佳答案 查看CanvasLayer基本上将所有这些都作为引用实现考虑在内的库。 关于HTMLCanvas作为Googlemap中的叠加View,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/5904682/

javascript - 如何拥有无限大的 Canvas ?

我正在构建一个使用Canvas进行绘图的网络应用程序。我想要一个无限大的绘图空间(你可以向任何方向滚动,只要你想)并将数据/图像保存到数据库。已完成与此处类似的操作:http://wordsquared.com/,玩的人越多,它就越大。我知道这需要以某种方式平铺图像,将它们保存到数据库中,然后仅将图像加载到视口(viewport)中。这和无限滚动将如何完成/我应该从哪里开始? 最佳答案 这是一种有点非常规的方法,但让我印象深刻的是它具有无限的潜力(理论上,具有无限的存储空间)。您将需要存储当前加载的棋盘block,以某种唯一ID的形

ios - 使用 Phonegap Canvas 在 iOS 中自定义字体

我正在尝试在iOS下的Phonegap中使用自定义字体。我遵循了几个教程并阅读了StackOverflow上的所有相关问题,但我仍然无法正确解决问题,即使我仔细检查了所有内容。这是字体:http://www.dafont.com/m04fatal-fury.font(黑色版)我走过的路使用Xcode作为资源将自定义字体文件添加到项目中添加一个名为UIAppFonts的Info.plist文件。使这个键成为一个数组对于您拥有的每种字体,将字体文件的全名(包括扩展名)作为UIAppFonts数组的项目输入保存信息.plist现在在您的应用程序中,您可以简单地调用[UIFontfontWit

javascript - 安全错误 : DOM Exception 18 when invoking toDataURL method of the Canvas

我在InternetExplorer和Safari浏览器上尝试从绘制了SVG图像的Canvas检索数据URL时遇到以下错误,而其他浏览器正常工作。此外,SVG图像包含一些xlink:href的元素属性设置为从用户文件系统读取的图像作为数据URL。由于这些图像不位于不同的域中,我想不出在尝试获取绘制SVG图像的Canvas的dataURL时抛出此错误的任何原因。提前致谢。SECURITY_ERR:DOMException18:Anattemptwasmadetobreakthroughthesecuritypolicyoftheuseragent." 最佳答案

javascript - 使用新数据在每个 AJAX 请求上更新 HTML canvas 标记

如果发现新用户或存在现有用户的新连接,我想在每次AJAX请求时更新我的​​Canvas。我有用户和他们之间的联系:vardata=[{"Id":38,"Connections":[39,40],"Name":"ABc"},{"Id":39,"Connections":[40],"Name":"pqr"},{"Id":40,"Connections":[],"Name":"lmn"}]在上面的示例中,Id:38的用户连接到用户39和40,用户39连接到用户40和用户40>已连接到用户39和用户38,因此用户40连接数组为空。我有一个Web服务,我将每1-2秒触发一次,以在此页面上显示新加

javascript - 找出在 html5 Canvas 上单击了哪个对象

假设我有一个html5/canvas应用程序,我可以在其中将对象放置在绘图Canvas上。某种图表编辑器,类似于Visio(但更简单)是否有一个框架可以帮助我找到单击/拖动的对象?一个选项是捕获点击事件并遍历我的所有对象(以半智能方式)并检查它是否被点击/拖动,但是我讨厌重新发明轮子! 最佳答案 简短的版本是Canvas本身不会跟踪这些。如果您不想重新发明轮子,请从教程中的示例代码开始"MakingandMovingSelectableShapesonanHTML5Canvas:ASimpleExample."它为单击和拖动提供了一

javascript - 旋转图像但不旋转 Canvas

我在Canvas中使用背景图像。我只想将背景图像旋转90度,但不应旋转上下文。如果我使用css变换,那么整个Canvas都会旋转。我该怎么办?varcan=document.getElementById('canvas');varctx=can.getContext('2d');ctx.rect(20,30,200,40);ctx.strokeStyle="red";ctx.lineWidth="2";ctx.stroke();$(function(){//$('#canvas').css({'transform':'rotate(90deg)'});});#canvas{backgr

javascript - Chrome canvas 2d context measureText 给我奇怪的结果

这是我的问题的精简版letcanvas=document.createElement('canvas')letctx=canvas.getContext('2d')ctx.font='11ptCalibri'ctx.fillStyle='#000000'lettemp=ctx.fontconsole.log(ctx.font)console.log(ctx.measureText('M').width)ctx.font='bold'+ctx.fontconsole.log(ctx.font)console.log(ctx.measureText('M').width)ctx.font=