Questions tagged «html5-canvas»

在尝试了复合操作并在画布上绘制图像之后，我现在尝试删除图像并进行合成。我该怎么做呢？ 我需要清除画布才能重画其他图像；这可能会持续一段时间，所以我认为每次绘制一个新矩形都不是最有效的选择。

1012 javascript  html  canvas  html5-canvas  composite 

即时创建元素并能够移动元素的最佳方法是什么？例如，假设我要创建一个矩形，圆形和多边形，然后选择这些对象并四处移动。 我了解HTML5提供了三个使之成为可能的元素：svg，canvas和div。对于我想做什么，这些元素中的哪一个将提供最佳性能？ 为了比较这些方法，我正在考虑创建三个视觉上相同的网页，每个网页中都有页眉，页脚，小部件和文本内容。第一页中的小部件将完全使用canvas元素创建，第二页中的完全使用svg元素创建，而第三页中的使用简单div元素HTML和CSS创建。

476 javascript  html  svg  html5-canvas 

如何自动缩放HTML5 <canvas>元素以适合页面？ 例如，我可以<div>通过将height和width属性设置为100％来缩放，但是<canvas>不会缩放吗？

400 javascript  html  html5-canvas 

我正在从事一个生成艺术项目，我希望允许用户从算法中保存生成的图像。总体思路是： 使用生成算法在HTML5 Canvas上创建图像 图像完成后，允许用户将画布作为图像文件保存到服务器 允许用户下载图像或将其添加到使用该算法制作的作品库中。 但是，我坚持第二步。在Google的帮助下，我找到了此博客文章，这似乎正是我想要的： 导致了JavaScript代码： function saveImage() { var canvasData = canvas.toDataURL("image/png"); var ajax = new XMLHttpRequest(); ajax.open("POST", "testSave.php", false); ajax.onreadystatechange = function() { console.log(ajax.responseText); } ajax.setRequestHeader("Content-Type", "application/upload"); ajax.send("imgData=" + canvasData); } 和相应的PHP（testSave.php）： <?php if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) { $imageData = $GLOBALS['HTTP_RAW_POST_DATA']; $filteredData = substr($imageData, strpos($imageData, ",") + 1); $unencodedData …

260 javascript  php  ajax  html5-canvas 

我想要一个包含一个中心词的网页。 我希望用动画来绘制该单词，以便页面以与我们相同的方式“写”出该单词，即，它从一个点开始并随时间绘制线条和曲线，从而最终结果是一个字形。 我不在乎这是使用<canvas>DOM还是DOM 完成，也不关心它是使用JavaScript还是CSS完成的。缺少jQuery会很好，但不是必需的。 我怎样才能做到这一点？我进行了详尽的搜索，没有运气。

229 javascript  css  canvas  html5-canvas  css-shapes 

我正在使用Nihilogic的“ Canvas2Image” JavaScript工具将画布图形转换为PNG图像。现在，我需要使用PHP将此工具生成的base64字符串转换为服务器上的实际PNG文件。 简而言之，我目前正在做的是使用Canvas2Image在客户端生成一个文件，然后检索base64编码的数据，并使用AJAX将其发送到服务器： // Generate the image file var image = Canvas2Image.saveAsPNG(canvas, true); image.id = "canvasimage"; canvas.parentNode.replaceChild(image, canvas); var url = 'hidden.php', data = $('#canvasimage').attr('src'); $.ajax({ type: "POST", url: url, dataType: 'text', data: { base64data : data } }); 此时，“ hidden.php”收到的数据块看起来像data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAABE ... 从这一点开始，我很困惑。通过阅读，我相信应该使用PHP的imagecreatefromstring函数，但是我不确定如何从base64编码的字符串实际创建实际的PNG图像并将其存储在服务器上。请帮忙！

211 php  javascript  base64  html5-canvas 

我想将画布保存为img。我有这个功能： function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } 它给我错误： 未捕获到的SecurityError：无法在“ HTMLCanvasElement”上执行“ toDataURL”：可能无法导出污染的画布。 我该怎么办？

186 javascript  html5-canvas 

数码相机的照片通常使用EXIF“方向”标签保存为JPEG。为了正确显示，需要根据设置的方向旋转/镜像图像，但是浏览器会忽略此信息来渲染图像。即使在大型商业Web应用程序中，对EXIF方向的支持也可能参差不齐1。相同的来源还提供 了JPEG可以具有的8个不同方向的很好的总结： 示例图像位于4处。 问题是如何在客户端旋转/镜像图像，以使其正确显示并在必要时可以进行进一步处理？ 有JS库可用于解析EXIF数据，包括方向属性2。Flickr指出，在解析大图像时可能需要性能，这需要使用Webworkers 3。 控制台工具可以正确调整图像方向5。解决问题的PHP脚本可在6获得

154 javascript  rotation  html5-canvas  exif 

我使用html5 canvas元素在浏览器中调整图像大小。事实证明，质量很低。我发现了这一点：在缩放<canvas>时禁用插值，但它无助于提高质量。 下面是我的css和js代码，以及用Photoshop调用并在canvas API中缩放的图像。 在浏览器中缩放图像时，我该怎么做才能获得最佳质量？ 注意：我想将大图像缩小为小图像，修改画布中的颜色并将结果从画布发送到服务器。 CSS： canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS： var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $img.load(function() { var originalContext = $originalCanvas[0].getContext('2d'); originalContext.imageSmoothingEnabled = false; originalContext.webkitImageSmoothingEnabled = false; originalContext.mozImageSmoothingEnabled = false; originalContext.drawImage(this, 0, 0, 379, 500); …

149 javascript  css  html  canvas  html5-canvas 

对于绘图应用程序，我将鼠标移动坐标保存到数组中，然后使用lineTo进行绘制。结果线不平滑。如何在所有收集的点之间生成一条曲线？ 我已经用谷歌搜索过，但是我只发现了3个绘制线条的函数：对于2个采样点，只需使用lineTo。对于3个采样点quadraticCurveTo，对于4个采样点，bezierCurveTo。 （我尝试bezierCurveTo为阵列中的每4个点绘制一个，但是这导致每4个采样点出现扭结，而不是连续的平滑曲线。） 我该如何编写一个函数绘制5个采样点及更多的平滑曲线？

133 javascript  canvas  html5-canvas  bezier  spline 

我的代码在localhost上运行良好，但在站点上不运行。 我从控制台收到此行的错误.getImageData(x,y,1,1).data： Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 我的代码的一部分： jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().top); if (this.target.nodeName!=="CANVAS")return null; return this.target.getContext('2d').getImageData(x,y,1,1).data; } 注意：我的图片网址（src）来自子域网址

131 javascript  html  html5-canvas 

我想根据相机在JPEG EXIF图像数据中设置的原始旋转角度旋转照片。诀窍是所有这些操作都应该在浏览器中使用JavaScript和进行<canvas>。 JavaScript如何访问JPEG，本地文件API对象，本地<img>或远程<img>EXIF数据以读取旋转信息？ 服务器端的答案不好。我正在寻找一种客户端解决方案。

125 javascript  jpeg  exif  html5-canvas 

我一直在尝试将画布的默认背景颜色从黑色更改为透明/其他任何颜色-但没有运气。 我的HTML： <canvas id="canvasColor"> 我的CSS： <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> 正如您在下面的在线示例中看到的那样，我在画布上附加了一些动画，因此不能仅执行不透明度：0; 在id上。 实时预览：http： //devsgs.com/preview/test/particle/ 任何想法如何覆盖默认黑色？

122 css  html  canvas  html5-canvas  three.js 

除了性能之外，是否有其他原因需要在2D游戏/应用程序中使用WebGL而不是2D-Canvas ？ 换句话说，WebGL提供了哪些2D功能，而2D-Canvas无法轻松实现这些功能？

112 html  html5-canvas  webgl 

我试图将两个画布堆叠在一起，使其成为双层画布。 我在这里看到了一个例子： <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> 但是我想将两个画布都设置在屏幕中心。如果我将的值设置left为常数，则当我更改屏幕的方向时（因为我在iPad上做aps），画布将不会像它在屏幕中的行为那样保留在屏幕中间。 <div align="center"> 有人可以帮忙吗？

103 css  html5-canvas