Tag: canvas

使用requestAnimationFrame控制fps？

看起来像requestAnimationFrame是现在animation事件的事实上的方式。 它在大多数情况下工作得非常好，但现在我正在尝试做一些canvasanimation，我想知道：有没有办法确保它以某个fps运行？ 我明白，RAF的目的是始终如一地保持stream畅的animation效果，而且我可能会冒着制作animation波涛汹涌的风险，但是现在它似乎以非常不同的速度运行，而且我想知道是否有办法打击不知何故。 我会使用setInterval但我想要优化，RAF提供（尤其是自动停止时，标签在焦点）。 如果有人想看我的代码，这是非常多的： animateFlash: function() { ctx_fg.clearRect(0,0,canvasWidth,canvasHeight); ctx_fg.fillStyle = 'rgba(177,39,116,1)'; ctx_fg.strokeStyle = 'none'; ctx_fg.beginPath(); for(var i in nodes) { nodes[i].drawFlash(); } ctx_fg.fill(); ctx_fg.closePath(); var instance = this; var rafID = requestAnimationFrame(function(){ instance.animateFlash(); }) var unfinishedNodes = nodes.filter(function(elem){ return elem.timer < timerMax; }); if(unfinishedNodes.length === 0) { console.log("done"); cancelAnimationFrame(rafID); instance.animate(); } } Node.drawFlash（）只是一些基于计数器variables确定半径的代码，然后绘制一个圆圈。 谢谢！

HTML5 Canvas drawImage比率错误iOS

我想用HTML5 Canvas调整从客户端的iOS相机拍摄的图像，但是我一直运行在这个奇怪的错误，如果图像的错误比率大于1.5mb 它可以在桌面上运行，但不能在带媒体上传API的最新iOS版本中运行。 你可以在这里看到一个例子： http : //jsbin.com/ekuros/1 任何想法如何解决这个问题？ 这是一个记忆问题？ $('#file').on('change', function (e) { var file = e.currentTarget.files[0]; var reader = new FileReader(); reader.onload = function (e) { var image = $('<img/>'); image.on('load', function () { var square = 320; var canvas = document.createElement('canvas'); canvas.width = square; canvas.height = square; var context = canvas.getContext('2d'); context.clearRect(0, 0, […]

放大点（使用比例和平移）

我希望能够放大HTML 5canvas中的鼠标下的点，例如在Google地图上缩放。 我怎样才能做到这一点？

如何在IE中使用HTML5 canvas元素？

我正在尝试使用HTML5canvas元素来绘制一些弧线和圆圈 – 这在FF中完美运行，但是IE8似乎不支持它。 现在，存在Javascript库似乎使IE8与Canvas一起运行良好。 一个例子可以在这里find 。 我已经阅读了他们的完整源代码，但我不明白他们如何使用Canvas与IE8工作。 有人可以对使用的方法进行一些说明吗？

是否有可能在XAML中绑定Canvas的Children属性？

我有点惊讶，不可能通过XAML为Canvas.Children设置一个绑定。 我不得不采取一种代码隐藏的方式，看起来像这样： private void UserControl_Loaded(object sender, RoutedEventArgs e) { DesignerViewModel dvm = this.DataContext as DesignerViewModel; dvm.Document.Items.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(Items_CollectionChanged); foreach (UIElement element in dvm.Document.Items) designerCanvas.Children.Add(element); } private void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { ObservableCollection<UIElement> collection = sender as ObservableCollection<UIElement>; foreach (UIElement element in collection) if (!designerCanvas.Children.Contains(element)) designerCanvas.Children.Add(element); List<UIElement> removeList = new List<UIElement>(); foreach (UIElement element […]

缩放<canvas>时禁用插值

注意 ：这与放大时现有canvas元素的渲染方式有关 ， 而不是如何将线条或graphics渲染到canvas表面上 。 换句话说，这一切都与缩放元素的 插值有关，并且与在canvas上绘制graphics的抗锯齿function无关。 我不关心浏览器是如何绘制线条的; 我关心浏览器在放大时如何渲染canvas元素本身 。 有一个canvas属性或浏览器设置，我可以改变编程禁用插值缩放<canvas>元素？ 跨浏览器的解决scheme是理想的，但不是必需的; 基于Webkit的浏览器是我的主要目标。 性能非常重要。 这个问题是最相似的，但没有充分说明问题。 对于它的价值，我尝试了image-rendering: -webkit-optimize-contrast无济于事。 该应用程序将是一个“复古”8位风格的HTML5 + JS编写的游戏，以清楚我需要什么。 为了说明，这里是一个例子。 （ 现场版 ） 假设我有一个21×21的canvas… <canvas id='b' width='21' height='21'></canvas> …有css，使元素5倍大（105×105）： canvas { border: 5px solid #ddd; } canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */ 我在canvas上画一个简单的“X”，如下所示： $('canvas').each(function () { […]

如何将MouseListener添加到Java Swing Canvas上的项目

我想创build一个Java面板，在用户点击的地方创build对象。 由于我的实际应用程序使用MVC方法，我也希望这些对象能够在模型更改时重新绘制自己，并提供菜单来更改它们的属性。 我认为控制x和y位置的最好方法是采用基于canvas的方法， JPanel从paintComponent方法调用这些对象的绘制方法。 然而，这只会在canvas上绘制形状，并不会添加对象本身，从而失去控制对象属性的所有function。 如果有人能告诉我我想要做的最好的方法，我将非常感激。 我已经创build了一些示例代码，可以在下面看到。 点击时，我想圆圈改变颜色，这是使用MouseListener实现的（它基本上代表了改变这个小例子中的模型属性）。 此外，我只是想确保放大/缩小仍然可以使用任何示例代码/build议可以提供，所以我已经添加button来放大和缩小对象进行快速testing。 import java.awt.*; import java.awt.event.*; import java.awt.geom.*; import javax.swing.*; import java.awt.geom.Ellipse2D; public class Main { public static void main(String args[]) { EventQueue.invokeLater(new Runnable() { @Override public void run() { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ExamplePanel panel = new ExamplePanel(); frame.add(panel); frame.pack(); frame.setVisible(true); } }); } //I […]

canvas图像跨平台不安全的错误

我有这个代码来创build从不同的服务器URL的canvas图像 function getBase64Image(imageUri) { var canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); var img = new Image(); img.src = imageUri; img.crossOrigin = "Anonymous"; img.onload = function() { canvas.width = this.width; canvas.height = this.height; ctx.drawImage(img, 0, 0, this.width, this.height); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var dataURL = canvas.toDataURL("image/png"); document.getElementById("dummyhiddenField").value = dataURL; }; } 我试图从服务器获取图像，并将其设置为隐藏字段的canvasurl，但只能使用本地图像 根据从stackoverflow的其他答案我设置crossOrigin […]

html5 – canvas元素 – 多个图层

没有任何扩展库，是否有可能在同一个canvas元素中有多个图层？ 所以如果我在顶层做一个clearRect，它不会抹掉底层的？ 谢谢。

我怎样才能将HTML元素转换为canvas元素？

暂时将常规元素转换为canvas将是非常有用的。 例如，说我有一个我想翻转的样式的div 。 我想dynamic地创build一个canvas，将HTMLElement “渲染”到canvas中，隐藏原始元素并为canvas设置animation。 可以这样做吗？