HTML5

新手在画布中不断丢失alpha值

我可能在这里做了一些蠢事,但是我很难在Alpha中使用alpha值进行合作。我试图从画布上的一个点上采样不透明的颜色,让它更透明,然后将它放在另一个地方 - 但是alpha部分似乎不起作用。剥离它有点像这样(从散布在脚本中的函数缩小): p = ground.ctx.getImageData( loc.x,loc.y,1,1).data; col = {R:p [0],G:p [1], ..
发布时间:2018-07-05 10:36:27 HTML5

HTML2Canvas不在IE11中捕获画布数据

我正在使用 HTML2Canvas 来捕获我的html页面的屏幕截图并将其保存为服务器中的图像。 我的Html包含 d3.js 图表和html元素。 d3.js图表​​生成为svg,所以为了捕获svg,我使用 Fabric.js 将svg转换为canvas元素。完成此过程后,我使用Html2Canvas将整个网页捕获为图像并将其保存在服务器中。 整个过程在Chrome和FF中运行良好。问题 ..
发布时间:2018-07-05 10:35:29 HTML5

使用Jquery的圆形滑块

如何将鼠标滑入圆形? 在画布中绘制圆弧和鼠标指针。鼠标应该是圆形路径上的拖拽山墙吗? //创建鼠标事件以拖动鼠标悬停弧的功能 函数mousedrag(){ var canvasoffset = $(this.canvas).offset(); var offsetX = canvasoffset.left; var offsetY = canvasoffset.top; ..
发布时间:2018-07-05 10:35:05 HTML5

Purescript MouseEvent得到x y的鼠标

我是purescript的新手,并试图让鼠标事件上的3D立方体旋转。但我无法在鼠标移动事件中获得鼠标指针的x和y坐标。我附上我的代码,下面有一个事件监听器。有人可以帮助我获取鼠标的x和y坐标,或者可以告诉我为鼠标编写事件监听器的更好方法。 node ..
发布时间:2018-07-05 10:34:28 HTML5

HTML5 Canvas& KineticJS层顺序在刷新时切换

我正在使用HTML5 Canvas和KineticJS构建动画。动画效果很好。但是,我注意到有时刷新时,我动画的图像的图层顺序会重新排列。这种层次顺序的切换似乎是随机发生的。例如,我可以单击刷新5次,图层顺序很好...单击刷新另外3次,图层顺序重新排列。任何人都可以帮助为什么这种层顺序的随机切换发生? 解决方案 这是你的问题: mac3rdpieceImageObj.onload ..
发布时间:2018-07-05 10:34:26 HTML5

kineticjs图层重绘优化

背景:我正在使用kineticjs开发一个实时多人html5画布游戏,主要将在移动电话浏览器上播放。游戏中有很多事情发生,例如每秒与服务器进行套接字通信,使用基于服务器响应的kineticjs进行重绘和动画,所有这些都在重图形界面之上。该游戏在桌面浏览器中运行良好,但在手机上是懒散的。所以,我需要找到可以优化代码的所有方法。 我的问题, 假设我需要根据我刚刚从服务器收到的服务器响应来重 ..
发布时间:2018-07-05 10:34:02 HTML5

如何在Chrome中可靠地呈现多个画布标签?

当网页上使用多个画布时,有没有人在使用Google Chrome时无法渲染画布标签? 我一直在发生这种情况。它发生在我的一些页面中,而不是其他页面;我很难隔离关键元素。当问题确实发生时,行为是一致的:一组特定的画布标签(有时是页面上的所有画布)都不会呈现 - 它们显示为空白。它在Chrome / Mac中可靠地出现,但在Firefox / Mac中不会出现。有趣的是,如果我右键单击其中一个空 ..
发布时间:2018-07-05 10:33:55 HTML5

在THREE.js中绘制一个椭圆

我正在尝试使用THREE.js绘制一个3D椭圆。 我注意到开发版本(r50-dev), EllipseCurve ( extras / core / Curve.js )和 path.ellipse ( extras / core / Path.js 已被添加。 不幸的是,我是THREE.js的新手,虽然我可以做基本的事情,但我还没有找到关于Curve的教程,更不用说仍在开发Ellip ..
发布时间:2018-07-05 10:33:50 HTML5

在Webgl中剪切图像

2-D画布提供了一个叫做绘图的api: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 其中 sx 是图片剪辑开始的位置。 1转换为0-> 2 vec2 zeroToTwo = zeroToOne * 2.0; //从0-> 2转换为-1-> +1(剪辑空间)vec2 clipSpace = zeroToTwo ..
发布时间:2018-07-05 10:33:43 HTML5

使用Fabric.js在SVG上无法正确渲染SVG

我使用 fabric.loadSVGFromURL 函数将SVG图像加载到画布。 大多数图像在画布上正确加载,但是有一些SVG图像在画布上没有正确加载(一半的SVG加载为黑色SVG)。 以下SVG未在画布上正确加载: http://dev9.edisbest.com/Bat_B_020 .svg 以下是我使用的代码: var src =“http://d ..
发布时间:2018-07-05 10:32:46 HTML5

HTML5将移动图像限制为画布

canvas.onmousemove = function(e){ if(isDown === true){ var pos = getMousePos(canvas,e); var x = pos.x; var y = pos.y; //从现在开始转换差异并开始 element.translate(x - startX,y - startY); drawIma ..
发布时间:2018-07-05 10:32:17 HTML5

WebGL清除每个setInterval之间

当按顺序调用 gl.drawArrays 时,它会在画布上绘制上一个图形的顶部。但是,当我把它放在 setInterval()中时,它会在重绘之前清除画布。 绘制矩形在彼此之上: for(var i = 0; i ..
发布时间:2018-07-05 10:30:57 HTML5

Cavnas - 重叠径向梯度清除

这是画布 - 透明圆形渐变的后续内容。 按照Hardmath的建议,我能够在画布中清除径向渐变区域。然而,出现了一个新问题:我无法清除彼此相邻的多个径向渐变;他们最终掩盖了前一个。用前一个区域清除的区域被当前区域的渐变淡化覆盖。请参阅下面的小提琴作为示例。 小提琴 http://jsfiddle.net/Dragonseer/gXTnM/ 代码 for(var i ..
发布时间:2018-07-05 10:30:22 HTML5

HTML5 Canvas:获取曲线的坐标

我在画布中有一个二次曲线(由开始,结束和控制点定义)。我需要的是获得更多的曲线坐标(例如,中间,四分之一等)。有了这个,我能够(在寻找坐标几次迭代之后)根据这条曲线动画一个对象(我知道它可以用SVG轻松完成,但这不是一个选项)。 图片取自 http://www.html5canvastutorials。 com / tutorials / html5-canvas-quadratic-cur ..
发布时间:2018-07-05 10:29:59 HTML5

如何使用Flot canvas插件

我正在用Flot构建一个Rails 3.2.11应用程序。我想用Prawn在PDF中渲染我的Flot图表。我的Flot图表在浏览器中渲染得很好。我可以很好地创建Prawn PDF(虽然还没有图表图片)。 我想使用Flot画布插件在画布上渲染我的轴等等我使用 .getCanvas()和 .toDataURL()方法将图像数据Ajax到服务器时包括在内,但我似乎无法让它工作。 我使用的是j ..
发布时间:2018-07-05 10:29:57 HTML5

打印canvas标签的内容

我制作了一个应用程序画布。我在画布中加载了更多图像(png,gif)。当我在浏览器(opera)上单击打印时,不会打印canvas标签的内容。使用其他浏览器(FF,IE,Chrome),没有问题。为什么? 解决方案 将HTML Canvas捕获为gif / jpg / png / pdf?可能会有用。 var canvas = document.getElementById(“my ..
发布时间:2018-07-05 10:29:36 HTML5

图像无法在画布上加载

我的问题是我在将本地托管图像加载到画布上时遇到问题。我已经尝试在Web服务器上托管代码,使用XAMPP和本地,并且LightBlue.jpg图像似乎永远不会加载。但是,当我使用网站上的外部图像时,代码可以完美运行。我在下面提供了一个示例。 HTML: ..
发布时间:2018-07-05 10:29:24 HTML5