Questions tagged «canvas»

如何使画布透明？我需要，因为我想将两个画布彼此叠放。

122 html  canvas 

我正在尝试选择用于更新项目的正确技术，该项目基本上在可缩放，可平移的图形中呈现数千个点。使用Protovis的当前实施效果不佳。在这里查看： http://www.planethunters.org/classify 完全缩小时大约有2000点。尝试使用底部的手柄放大一点，然后拖动以平移。您会发现它非常不稳定，除非您有一台非常快的计算机，否则您在一个内核上的CPU使用率可能会高达100％。对焦点区域的每次更改都需要重绘到原图，这相当慢，而且绘制的点数更多时更糟。 我想对界面进行一些更新，并更改底层的可视化技术，以更好地响应动画和交互。从下面的文章来看，似乎是在另一个基于SVG的库还是一个基于画布的库之间进行选择： http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.js源自Protovis，它是基于SVG的，被认为在渲染动画方面更好。但是，我对性能有多好以及性能上限有疑问。因此，我也在考虑使用基于画布的库（例如KineticJS）进行更全面的大修。但是，在我深入研究一种或另一种方法之前，我想听听有人用如此大量的数据完成了类似的Web应用程序，并征求了他们的意见。 最重要的是性能，其次是增加其他交互功能和对动画进行编程的重点。一次最多可能不会超过2000个点，每个点上都有很小的误差线。放大，缩小和平移需要平滑。如果最新的SVG库在这方面是不错的，那么使用d3的便利性可能会超过KineticJS等的增加的设置。但是，如果使用canvas具有巨大的性能优势，尤其是对于计算机速度较慢的人，那么我绝对会喜欢这样。 NYTimes使用SVG制作的应用示例，但仍可以流畅地进行动画设置：http：//www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html 。如果我可以获得这种性能，而不必编写自己的画布绘制代码，则可能会选择SVG。 我注意到有些用户使用了d3.js操纵与画布渲染相结合的方式。但是，我在网上找不到有关此文档的大量文档，也无法与该帖子的OP联系。如果任何人有执行这种DOM到画布（演示，代码）实现的经验，我也希望听到您的来信。似乎可以操纵数据并可以自定义控制如何呈现数据（因此可以提高性能），这似乎是一种很好的混合方式，但是我想知道是否必须将所有内容加载到DOM仍然会减慢速度。 我知道存在一些与此问题类似的问题，但没有一个问题完全相同。谢谢你的帮助。 后续：我最终使用的实现位于https://github.com/zooniverse/LightCurves

114 html  canvas  svg  d3.js  kineticjs 

我正在使用一个高度为600to 1000像素，宽度为数万或数十万像素的canvas元素。但是，经过一定数量的像素（显然是未知的）之后，画布不再显示我使用JS绘制的形状。 有谁知道是否有限制？ 在Chrome 12和Firefox 4中都进行了测试。

112 javascript  html  canvas 

如何在“画布”中打开图像？被编码 我正在使用 var strDataURI = oCanvas.toDataURL(); 输出是已编码的base 64图像。如何在画布上绘制此图像？ 我要使用strDataURI 并创建图片吗？可能吗？ 如果不是，那么将图像加载到画布上的解决方案可能是什么？

112 image  html  canvas  data-uri 

是否可以查询HTML Canvas对象以获取特定位置的颜色？

111 javascript  html  canvas 

我想使用鼠标在HTML画布上绘制（例如：绘制签名，绘制名称...） 请帮我怎么办？请提供一些源代码。谢谢

110 html  canvas  gesture-recognition  gestures 

如果文本包含“ \ n”，我似乎无法将文本添加到画布。我的意思是，换行符没有显示/起作用。 ctxPaint.fillText("s ome \n \\n <br/> thing", x, y); 上面的代码将"s ome \n <br/> thing"在一行上绘制。 这是fillText的限制还是我做错了？“ \ n”在那里，没有被打印，但是它们也不起作用。

108 javascript  html  canvas  line  break 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引用的形式回答。 7年前关闭。 改善这个问题 我目前正在研究在新的HTML 5应用程序中使用画布的选项，并且想知道HTML canvas JavaScript库和框架的当前最新状态是什么？ 特别是，是否存在支持游戏开发所需的事物的框架-复杂的动画，管理场景图，处理事件和用户交互？ 也愿意考虑商业和开源产品。

107 javascript  frameworks  html  canvas 

我正在尝试使用HTML中的新canvas元素。 我只是想将图像添加到画布，但是由于某种原因它不起作用。 我有以下代码： 的HTML <canvas id="viewport"></canvas> 的CSS canvas#viewport { border: 1px solid white; width: 900px; } JS var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; context.drawImage(base_image, 100, 100); } 图片存在，并且没有JavaScript错误。该图像只是不显示。 这一定是我错过的非常简单的事情...

106 javascript  html  canvas 

我一直在寻找解决方案已有一段时间，但没有发现任何东西。也许这只是我的搜索字词。好吧，我试图根据浏览器窗口的大小使画布居中。画布是800x600。而且如果窗口低于800x600，它也应该调整大小（但目前还不是很重要）

105 html  canvas  css  resize 

我发现了一些不同的帖子，甚至关于stackoverflow的问题都回答了这个问题。我基本上正在实现与此职位相同的事情。 所以这是我的问题。上传照片时，我还需要提交表单的其余部分。这是我的html： <form id="uploadImageForm" enctype="multipart/form-data"> <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <input id="name" value="#{name}" /> ... a few more inputs ... </form> 以前，我不需要调整图像大小，因此我的javascript如下所示： window.uploadPhotos = function(url){ var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ ... handle error... …

102 javascript  html  canvas 

我在节点上安装canvas模块时遇到问题..似乎与开罗有关，我收到此错误... npm http GET https://registry.npmjs.org/canvas npm http 304 https://registry.npmjs.org/canvas npm http GET https://registry.npmjs.org/nan npm http 304 https://registry.npmjs.org/nan > canvas@1.1.3 install /Users/plimb/Desktop/motion-therapy/node_modules/canvas > node-gyp rebuild Package cairo was not found in the pkg-config search path. Perhaps you should add the directory containing `cairo.pc' to the PKG_CONFIG_PATH environment variable No package 'cairo' …

101 node.js  canvas  terminal  cairo 

我有画布绘图选项卡，并希望lineWidth基于最后两个mousemove坐标更新之间的距离。我将自己将距离转换为宽度，我只需要知道如何获得这些点之间的距离（我已经有了这些点的坐标）即可。

100 javascript  canvas 

我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。

94 javascript  css  html  canvas 

如何获取JavaScript中canvas元素的宽度和高度？ 另外，我一直在阅读的画布的“上下文”是什么？

94 javascript  html  canvas