Tag: canvas

jquery tipsy工具提示不与d3.js圈子一起使用: 这是我的d3.js代码 var circles = vis.selectAll(“circle”).data(data) circles .enter() .append(“svg:circle”) .attr(“stroke”, “black”) .attr(“cx”, function (d) { return xRange(d.year); }) .attr(“cy”, function (d) { return yRange(d.count); }) .style(“fill”, function(d,i){return color(i);}) .append(“svg:title”) .text(function (d) { return d.corpus; }) 最后我在圆圈上附加了一个工具提示。我试图将jquery tipsy工具提示附加到圆圈但是没有用。这就是我做的方式（我跟着http://bl.ocks.org/1373263 ） var circles = vis.selectAll(“circle”).data(data) circles .enter() .append(“svg:circle”) .attr(“stroke”, “black”) .attr(“cx”, function (d) { return xRange(d.year); }) .attr(“cy”, function […]

Canvas drawImage被1 Pixel莫名其妙地抵消: 我正在制作一个使用精灵表格的帆布游戏。角色的尺寸为64px宽，128px高，每个动画10帧。因此，单个动画的总宽度为640px宽，128px高。但是，当我使用以下代码时，动画偏移1px，有时在按住移动键时闪烁。 player.width = 64; player.height = 128; player.x = canvas.width / 2; player.y = canvas.height / 2; ctx.drawImage( LoadedImages.player_sprite, 64, // This is offset by 1px when moving. 63px fixes it. 128, player.width, player.height, player.x, player.y, player.width, player.height ); 这是发生了什么的图片：将宽度更改为63似乎可以解决问题，但它并不能解释为什么它首先要做到这一点。 Codepen上提供完整代码 http://codepen.io/Codewoofy/pen/QNGLNj 雪碧表：完整代码： var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || […]

canvas受到跨源数据的污染: 我正在加载来自第三方网站的动作jpeg，我可以信任。我正在尝试getImageData()但浏览器（Chrome 23.0）抱怨说： Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 在SO上有一些类似的问题，但他们使用的是本地文件，而我正在使用第三方媒体。我的脚本在共享服务器上运行，我不拥有远程服务器。我试过img.crossOrigin = ‘Anonymous’或img.crossOrigin = ” （请参阅Chromium博客上关于CORS的这篇文章），但它没有帮助。关于如何在具有跨源数据的canvas上获取getImageData任何想法？谢谢！

javascript-无法将canvas转换为图像数据: 伙计们！我正在尝试制作一个演示，用户可以通过他的浏览器从网络摄像头捕获图像，这个图像将通过使用AJAX调用传递给PHP服务保存在后端。我能够捕获canvas但不能将其转换为图像数据。我得到的canvas is undefined error 安装非常简单。 HTML Snap Photo JAVASCRIPT // Grab elements, create settings, etc. var video = document.getElementById(‘videoElement’); // Get access to the camera! if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // Not adding `{ audio: true }` since we only want video now navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { video.src = window.URL.createObjectURL(stream); video.play(); }); […]

画画像油漆一样: 我有三个arrys： clickX = [], clickY = [], clickDrag = []; 这是你点击时发生的事情： $(‘#canvasCursor’).mousedown(function (e) { console.log(‘down’); mouseX = e.pageX – this.offsetLeft; mouseY = e.pageY – this.offsetTop; paint = true; addClick(e.pageX – this.offsetLeft, e.pageY – this.offsetTop); redraw(); }); 这里它将点击添加到数组并绘制： function redraw（）{ctx.clearRect（0,0，ctx.canvas.width，ctx.canvas.height）; //清除canvas ctx.strokeStyle = “green”; ctx.lineJoin = “round”; ctx.lineWidth = brushSize*2; for (var i = 0; i […]

在canvas上平移图像后，工具提示无法在平移位置查看？: 以下是我的代码供参考。一个主要图像显示在canvas上。在具有dataJSON对象的图像上，我传递x和y坐标并在那里绘制球图像。然后添加工具提示。（function tooltipFunc）但是当我平移图像时，在hover时那些球图像上看不到工具提示。** 在tooltipFunc函数中，如果代码是第一次加载页面时的默认位置。当我们平移图像以显示工具提示时，其他代码用于转换位置。但是在平移之后，当鼠标hover在球图像上时，工具提示是不可见的。当我点击那些球图像时，工具提示是可见的，但不在翻译位置。有什么建议？ //以下是代码供参考 var isDown = false; var startCoords = []; var last = [0, 0]; canvas.onmousedown = function(e){ isDown = true; startCoords = [ e.offsetX – last[0], e.offsetY – last[1] ]; }; canvas.onmouseup = function(e){ isDown = false; last = [ e.offsetX […]

将canvas数据保存到数组的问题: 我正在使用HTML5canvas创建一个Web应用程序来绘制图像（比如绘制web），我尝试实现“撤消”（ctrl + Z）和“重做”function，这里我面临一个canvas元素数组的奇怪问题。有时，当我按下ctrl + Z来撤消时，会出现一个空白图像，但是数据在数组中并指向正确的元素（因为当我使用undo / redo时，我设法以正确的顺序更正图像）。如果你能看看下面的代码，我将不胜感激，我已经花了很多时间，我无法找到问题…… 🙁 function Stack(firstImg , size) { var drawStack = new Array(); var stackIndex = 0; var stackTop = 0; var stackFloor = 0; var stackSize = size; drawStack[0] = firstImg; this.add = function() { drawStack[++stackIndex%stackSize] = cvs.toDataURL(“image/png”); if (stackIndex >= stackSize) stackFloor = (stackIndex +1) % […]

撤消/重做不正常，缩放后绘画也不能正常工作: 我正在尝试使用撤消和重做function实现一个油漆桶工具。问题是undo和redo第一次正常工作，但是当我多次撤消重做时，代码失败了。任何人都可以帮我解决这个问题吗？此外，缩放function正常，但缩放后绘画无法正常工作。这是我的完整代码。你可以复制粘贴，它将在你的最后工作。 Painitng body { width: 100%; height: auto; text-align: center; } .colorpick { widh: 100%; height: atuo; } .pick { display: inline-block; width: 30px; height: 30px; margin: 5px; cursor: pointer; } canvas { border: 2px solid silver; } Zoom In Zoom Out Undo Redo var colorYellow = { r: 255, […]

使用drawImage将加载的图像淡入Canvas: 关于交叉渐变图像的这个问题已经给出了Canvas中交叉渐变解决方案的答案。我试图做同样的事情，唯一的区别是我试图淡化运行时加载的图像。图像被正确加载但没有可见的淡入淡出。由于加载的图像，这不起作用吗？谢谢。 HTML JS var toggle = true; var canvas = document.getElementById(‘bg1’); canvas.width = $(document).width(); canvas.height = $(document).height(); var ctx = canvas.getContext(‘2d’); var canvas2 = document.getElementById(‘bg2’); canvas2.width = $(document).width(); canvas2.height = $(document).height(); var ctx2 = canvas2.getContext(‘2d’); var image = new Image(); image.src = ‘download1.jpg’; var image2 = new Image(); image2.src = ‘download2.jpg’; […]

使用标记连接canvas菜单: 我正在制作一个地图项目，我需要标记一些建筑物来显示该特定建筑的一些数据。基本上，从字面上看，我正在尝试建立这样的东西我找到了关闭canvas项目，我将它用于我的地图，这是一个有效的JSFIDDLE示例。对于地图我正在使用openlayers3 ， openstreetmap ，我没有使用google-maps ，我使用它并不感兴趣，我只是参考这张图片，因为他们有一个很好的例子，这个canvas显示数据菜单。正如你所看到的，我在NYC周围标记了不同的区域，我想，当我点击示例时，我触发canvas菜单（不要介意它会改变canvasnav-bar样式）并显示该对象的正确数据。我的问题是：最好的方法是什么，我想学习如何将这个非canvas粘贴到我的地图上，所以标记可以触发canvas？我知道有一个隐藏的我将其显示为汉堡图标，用于触发canvas菜单。但我不明白如何将所有标记连接到canvas以显示每个建筑物的不同数据。我想学习如何做到这一点？使用javascript或jquery会很棒，我不认为openlayers3有这种灵活性，但也许有，我对此有点困惑，有人可以帮我构建这个，谢谢。