Tag: html5 canvas

实时数据在html5的线形图上绘制graphics: 我想创build一个每隔几秒钟更新一次的折线图，而不需要刷新页面（它将从一个单独的文件中获取更新到服务器上的信息），它们是否是任何JavaScript库（而不是JQuery）那会使这很容易？任何人都可以在网页上显示意思的例子吗？从1到10的规模会有多难？（10个难）如果这个问题很重要的话，数据也会在固定的10秒内更新。如果可能的话，我想坚持只是CSS3的HTML5和JavaScript。

使用JavaScript调整Base-64图像的大小，而不使用canvas: 我需要一种方法来调整JavaScript中的图片而不使用HTML元素。我的移动HTML应用程序拍照，然后将其转换为base64string。此后，我需要在发送到API之前调整它们的大小以节省存储空间。我正在寻找一种不同的，更合适的方式来调整它们，然后使用canvas元素。有没有办法？

canvasdrawImage缩放: 我试图按比例缩放一个图像到canvas上。我可以用固定的宽度和高度来缩放它，如下所示： context.drawImage(imageObj, 0, 0, 100, 100) 但是我只想调整宽度并调整高度。像下面这样： context.drawImage(imageObj, 0, 0, 100, auto) 我到处都可以想到，如果这是可能的，我还没有看到。

调整图像与JavaScript的canvas（顺利）: 我试图用canvas调整一些图像的大小，但是我对如何平滑它们毫无头绪。在Photoshop，浏览器等。有一些algorithm，他们使用（如双三次，双线性），但我不知道这些是否内置到canvas或不。这是我的小提琴： http : //jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); 第一个是正常大小的图像标签，第二个是canvas。注意canvas如何不平滑。我怎样才能达到“平稳”？

在上传之前在浏览器中裁剪图像: 我发现的许多图书馆，如Jcrop，实际上并没有裁剪，它只创build一个图像裁剪UI。然后取决于服务器做实际的裁剪。如何使用某些HTML5function在不使用任何服务器端代码的情况下将图像剪裁到客户端。如果是，是否有一些例子或提示？

如何释放JavaScript中的内存: 我正在使用包含大量数据（数百万整数）的canvas和ImageData对象。所以使用一些数组已经占用了大量的内存（高达300MB）。有没有办法在不需要的时候释放一些数组的内存？我试图将undefined分配给该variables。这样对吗？

如何在移动网页浏览器中使用input捕获照片后在canvas上以正确的方向绘制照片？: 我正在制作一个简单的移动应用程序，允许访客通过使用html5 input [type = file]元素捕捉照片。然后，我将显示在网上预览，然后访问者可以select将照片上传到我的服务器用于其他目的（即：上传到FB）当我用iPhone拍照并垂直放置时，我发现照片的方向有问题。照片的标签方向正确。但是，当我尝试使用drawImage（）方法将其绘制到canvas中时，它将绘制90度旋转。我试图用4个方向拍照，其中只有一个可以在canvas上画出正确的图像，有些则是旋转的，甚至是倒过来的。那么，我很困惑，得到正确的方向来解决这个问题…感谢您的帮助… 这里是我的代码，主要是从MDN复制 <div class="container"> <h1>Camera API</h1> <section class="main-content"> <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local […]

是否有任何理由使用WebGL而不是2D游戏/应用程序的2Dcanvas？: 使用WebGL代替2D游戏/应用程序的2D-Canvas是否有其他的原因，除了性能？换句话说，WebGL提供哪些2Dfunction是2D-Canvas无法轻松实现的？

animationcanvas看起来像电视噪音: 我有一个名为generateNoise()的函数，它创build一个canvas元素，并绘制随机的RGBA值; 这给出了噪音的外观。我的问题什么是最好的方式无限制地animation的噪音给运动的外观。这样可能会有更多的生命？的jsfiddle function generateNoise(opacity) { if(!!!document.createElement('canvas').getContext) { return false; } var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), x,y, r,g,b, opacity = opacity || .2; canvas.width = 55; canvas.height = 55; for (x = 0; x < canvas.width; x++){ for (y = 0; y < canvas.height; y++){ r = Math.floor(Math.random() * 255); […]

如何在php中使用一张图片绘制一个形状: 我需要使用一张图片创build一个帧图像。例如：用户将从后端上传图片：现在我需要根据前端用户的要求在前端创build一个框架（用户将select框架的高度和宽度，然后他将select这个图片），如下所示：我没有办法做到这一点，我试图通过CSS和HTMLcanvas做到这一点，但没有运气。有人可以请我build议我怎样才能实现这一点，通过使用PHP或CSS或HTML或JavaScript或任何如何。你可以在这里看到这个工作的例子，实际上我需要做的。创build你自己的框架