草庐IT

Canvas-EventSystem-Panel

全部标签

javascript - HTML5 Canvas getImageData 安全错误

我想将彩色图像更改为灰度图像,但在尝试使用getImageData时出现安全错误。UncaughtSecurityError:Failedtoexecute'getImageData'on'CanvasRenderingContext2D':Thecanvashasbeentaintedbycross-origindata.我知道到处都在讨论这个错误,但是没有一个有明确的解决方案。请帮忙!functiongrayscale(){varmyCanvas=document.getElementById("c1");varmyCanvasContext=myCanvas.getContext

javascript - 如何使用原始 Canvas 的上下文和数据更新克隆的 HTML Canvas 元素?

我编写了一个脚本,允许用户在html5canvas元素上绘制简单的线条。最终目标是让这张图在浏览器的其余部分平铺和重复。我已经在页面上复制了一个Canvas,但正在努力研究如何在多个Canvas上同时绘制相同的线条。我会在下面粘贴我的代码varsize=40;varmd=false;varcanvas=document.getElementById('canvas');canvas.addEventListener('mousedown',down);canvas.addEventListener('mouseup',toggledraw);canvas.width=600;canva

javascript - 从 DOM 拖放,放入 Canvas 或 SVG

我将要构建一个工具,允许用户将列表中的项目拖放到Canvas中以构建树/组织结构图。想知道是否有可能将一个常规的li-node拖到Canvas/svg上并检测Canvas上的哪个位置以及哪个元素被丢弃了?也许您有比使用canvas/svg更好的建议?我唯一的要求是用户应该能够直观地从列表中拖动项目以构建图表/组织结构图。 最佳答案 是的,可以拖动到另一个元素上/上方并确定您在该元素上的位置。对于SVG,您需要使用如下代码将鼠标坐标转换为Canvas局部空间:functionmouseXY(evt){varmxy=svg.create

javascript - HTML5 将 Canvas 保存到服务器上的文件

我需要使用html5canvas创建一个组件,给定一个图像,用户可以在其上绘制并直接(通过一种保存按钮)将其自定义版本上传到服务器。我可以使用htmlCanvas吗?有什么建议吗?提前谢谢 最佳答案 你可以像这样获取数据url的图像:vardataUrl=document.getElementById('your-canvas').toDataURL();然后您可以将这个(很长的字符串)发送到服务器并在解码后将其保存到一个文件中(它是用base64编码的)。编辑:请记住按照评论中的建议通过POST提交。GET在各种浏览器中都有一些长

html - 在另一个 Canvas 上绘制 Canvas 是模糊的。我该如何解决?

我一直在进行一些HTML5Canvas实验,并进行了一系列技术实验编辑https://github.com/AlexChesser/jsSprite(WSAD,Q,E,XkeysontheMinotaurkeydemo,addCandBontheZombieDemo)如果您查看演示编号1:01-draw_minotaur.php,您会看到直接在Canvas上绘制的图像,它看起来漂亮而清晰。但是,如果您与我将Minotaur放在Canvas上然后在父级Canvas上绘制该Canvas的演示进行比较,结果是模糊的:03-drawn_minotaur_on_canvas.php如何确保Can

javascript - 如何提交 html5 Canvas 作为表单发布的一部分?

我希望将图像数据从Canvas标签流式传输到node.js服务器。我可以自己处理服务器端代码,但如何从Canvas提交数据?我希望得到涉及多部分表单数据的建议,因为我想流式传输数据,因为我希望图像大小在50MB左右。如果我尝试一次发布所有数据,它往往会使客户端的浏览器崩溃。 最佳答案 您可以使用FormData模拟一个普通的"multipart/form-data"文件提交:canvas.toBlob(function(blob){varformData=newFormData();formData.append("image_fi

html - Canvas 测速仪指针怎么慢慢移动?

我使用以下代码来为我的速度计移动Canvas中的图片。varmeter=newImage,needle=newImage;window.onload=function(){varc=document.getElementsByTagName('canvas')[0];varctx=c.getContext('2d');setInterval(function(){ctx.save();ctx.clearRect(0,0,c.width,c.height);ctx.translate(c.width/2,c.height/2);ctx.drawImage(meter,-165,-160)

html - 如何在 HTML5 canvas 中剪切部分文本?

我有一个在HTML5Canvas上绘制的文本。如何剪裁或隐藏行左侧的部分文本?在此示例中,单词“HELLO”的部分被剪裁到红线的左侧。有两个限制:所有东西都画在同一张Canvas上。没有要创建的新Canvas我实际工作中的红线是图表的y轴。红线的左侧是轴的标签。所以想象一下,在那一边画了一些东西,他们需要展示。该部分无法被阻止或删除。 最佳答案 Jarrod的有用技术的替代方法是在绘制文本时使用裁剪区域。例如,如果您的y轴位于30px,则此剪辑不会在30px的左侧绘制文本ctx.rect(30,0,canvas.width-30,c

css - Internet Explorer 中的 Canvas 覆盖页面

我使用这段代码将我的Canvas居中:position:absolute;top:50%;left:50%;margin-top:-200px;/*Halfofcanvasheight*/margin-left:-275px;/*Halfofcanvaswidth*/它在除IE9和10之外的所有浏览器中都能完美运行。在InternetExplorer中,它覆盖整个页面。是否可以支持在IE中居中Canvas? 最佳答案 使用margin:0auto;居中与display:block;几乎适用于所有浏览器——支持的浏览器当然。实例:ht

css - WP7 + HTML5 - 如何防止 Canvas 被选中/突出显示

我正在尝试为WindowsPhone7/7.5编写一个简单的HTML5应用程序。我有一个HTML5页面,其Canvas几乎与屏幕一样大。当我在屏幕上单击/点击时,Canvas被选中。我不想要这种行为,但我仍然希望能够单击/点击各种控件。有没有办法避免这种行为?下面是显示效果的屏幕截图的链接。我试图在正文中使用CSS来消除这种行为。到目前为止没有任何效果。body{/*disableselections/cutcopypasteactions*/-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-