标签: html5-canvas

我试图在html5画布上绘制图像.问题是在画布中拉伸的图像

load('img_the_scream',
    'http://www.w3schools.com/tags/img_the_scream.jpg',
    function( img ){
        console.log(  img.width , img.height );
        ctx.drawImage( img, 10, 10 , img.width , img.height );
    }
);

我在http://jsfiddle.net/75rAU/中添加了这个问题

我有一个变量context,这是我画布的第二个上下文.

var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');

context.scale(x,y)多次调用会根据先前的比例缩放上下文.例如,context.scale(2,2); context.scale(2,2)相当于context.scale(4,4).如何重置上下文的比例？

我正在调查使用HTML画布作为显示媒体制作游戏的可能性.为了完成我需要做的示例任务,我需要从多个等距区块构建游戏环境.当然,在2D工作意味着他们必须采用矩形包装,因此瓷砖之间有很大的重叠.

我已经够大了,这个问题的自然解决方案就是调用BitBltMasked.哦等等,不,HTML画布没有像BitBlt那样简单和令人愉悦的东西.似乎将像素数据转储到画布的唯一方法是使用drawImage(),它没有用于忽略alpha通道的有用绘图模式,或者使用具有数组中图像数据的ImageData对象.访问.是.界限.检查.和.因此.狗.慢.

好吧,这更像是一个咆哮而不是一个问题(W3C喜欢的东西往往会引起我的注意),但我真正想知道的是如何快速绘制画布？我发现很难放弃做100s drawImages()的感觉,每次抽奖都尊重alpha通道,这本身就是有罪的,并且可能使我的应用程序在许多浏览器中表现得像屁股.另一方面,实现BitBlt的唯一方法是在很大程度上依赖于浏览器使用类似热点的执行技术来使其快速运行.

有没有办法快速划分每个可能的实现,或者我只是忘记性能？

我正在研究heatmap.js修复,我想知道是否有人知道是否有可能用<canvas>2d渲染上下文来实现以下效果.

• 我有一个从黑色(alpha 0.5)到透明40像素半径的径向渐变.径向梯度的中心在x = 50,y = 50
• 我有另一个从黑色(alpha 0.5)到透明,40像素半径的径向渐变.径向梯度的中心位于x = 80,y = 50

两个梯度重叠.我现在的问题是:重叠区域加在一起导致比径向渐变中心更高的alpha值,从而显示错误的数据(例如,由于渐变之间的那些添加,热图中的较热区域)

看看下面的要点,通过在控制台中执行它,您可以看到问题.

预期的行为将是:最暗的区域是渐变中心,两个渐变的重叠区域合并但不会加起来.

在看到没有globalCompositeOperations导致预期的行为后,我尝试了这些操作的组合.我认为可能的方式可能如下:

• 绘制第一个渐变
• 使用compositeOperation'destination-out'
• 绘制第二个渐变 - >从第一个渐变中减去重叠区域
• 使用compositeOperation'source-over'
• 再次绘制第二个渐变

但不幸的是,我没有找到一个有效的组合.我很想听听您的反馈,提前谢谢!

PS:我知道这可以通过手动操作像素来完成,但我想知道是否有更简单,更优雅和更快的解决方案.

我在HTML canvas元素中创建了一个基本形状,工作正常.

当我调整画布大小时,画布中的所有绘图都消失了.这是正常行为吗？或者是否有可用于阻止此功能的功能？

解决这个问题的一种方法是在canvas调整大小上再次调用绘图函数,但是如果要绘制大量内容,这可能效率不高.

什么是最好的方式？

以下是示例代码https://gist.github.com/2983915的链接

嗨,我有一个Web应该能够在智能手机和桌面浏览器上运行.虽然我期望在像Iphone这样的小型设备上获得一些奇怪的行为,但我非常有信心它会在Android Galaxy Tab上运行良好,这是我现在可以运行测试的Android设备.

现在我在Galaxy Tab上安装了一堆浏览器来测试:

• Android Native Browser
• 适用于Android的Chrome
• 适用于Android的Firefox

在我使用过的桌面上

• 火狐
• 谷歌浏览器

最后我有一个Iphone来测试.

该网站使用HTML5画布进行像素和基于精灵的绘制,没有花哨的变换,滤镜或效果,主要是简单的路径和多边形.我会听触摸事件并使用requestAnimationFrame正确的重绘.

总体而言,该应用程序在桌面浏览器上运行良好,它在iOS Safari(iPhone)和Firefox-on-Android上运行良好.Androids Native Browser给我带来了麻烦.我已将其设置为当javascript没有响应时屏幕刷新红色,并且在触摸屏幕时它几乎总是闪烁.

所以我想知道Android Native App和HTML5是否存在任何已知问题.由于本机浏览器的名称不存在,因此很难获得有关此内容的Google信息.有什么想法,我可以获得更多信息？什么可能导致本机Android浏览器滞后的想法？

关于这个问题有一些想法:

• iOS不支持requestAnimationFrame,因此我将其替换为基于超时的替换.如果我在Android的本机浏览器上使用该替换,问题仍然存在.

• 我经常使用AJAX(google clojure xhrio)从服务器检索数据.可能是数据检索回调是cloggin我的事件管道？

• 是否已知日志控制台消息(console.log)会降低应用程序的速度？他们可以触发浏览器重新运行DOM树或任何相关的东西吗？

这是一个奇怪的问题,我只在本机浏览器中的Samsung Galaxy Tab 2和Galaxy S2上的Native浏览器上遇到这个问题.

这也已经在其他Android手机和平板电脑上进行了测试,例如Nexus 7和Galaxy S4,但他们的原生浏览器是镀铬的,所以看起来很好.任何IOS浏览器,Windows桌面浏览器或Mac桌面浏览器也不存在此问题.

这几乎是因为网页自身加载了两次!

因为有一个重复的canvas元素,它会像主画布那样更新.

在这里它似乎只有在横向模式下旋转才会发生,但我相信在纵向模式下,画布'完全对齐在顶部.

什么是更奇怪的,你看到的菜单按钮是一个切换按钮,点击打开菜单,点击关闭菜单.点击此设备时,它会立即打开和关闭.静音按钮切换也是如此.

我完全不知所措.

我已经做了一些javascript调试,在这里和那里抛出一些警报,并且创建对画布的引用的初始化函数等只被调用一次.

我已经阅读并听说过硬件加速导致问题,但我可能找到的解决方案只与构建本机应用程序有关!不是HTML5 Canvas网页.

任何有关这方面的见解都可能会很棒!提前致谢.

- 编辑

我也在这个测试alert(document.getElementsByTagName('canvas').length);中看看DOM中是否有2个画布,但它返回1!

所以我看到有一些新的(ish)函数被提出; toDataURLHD,toBlobHD,getImageDataHD等."在天然画布位图分辨率返回[数据]",其(http://developers.whatwg.org/the-canvas-element.html).

但我不懂术语.这是否意味着有些情况下非HD版本会在返回之前重新调整图像数据？(即在高分辨率显示器上可以toDataURL产生质量低于实际画布的图像),或者这只是指图像中每英寸像素数的元数据？

我一直在尝试尽可能多的缩放方法(小提琴:http://jsfiddle.net/SktKQ/),它似乎总是像素为像素,但这几乎没有定论,我不知道可以访问任何高分辨率显示器进行测试.

我正在寻找的是:我可以依靠toDataURL&Co.生产我的画布的像素对像素副本,其宽度和高度完全等于元素上设置的属性吗？(如果是这样,HD版本有什么意义？)

我正在使用fabric.js在画布上画一条线.这是我的代码,但我没有得到任何输出:

$("#Line").click(function() {
    // alert("Line");
    canvas.add(new fabric.Line([50, 100, 200, 200], {
        left: 170,
        top: 150,
        fill: 'red'
    }));
});

你能不能看一下这个演示,让我知道如何在不同坐标的画布上绘制多个圆圈,而不重复一堆代码？

正如你在Demo和代码中看到的那样

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(150, 50, 5, 0, Math.PI * 2, true);
ctx.arc(20, 85, 5, 0, Math.PI * 2, true);
ctx.arc(160, 95, 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

我尝试将它们放在下面,ctx但它不正确,所以我尝试使用for循环创建50个点,但我有重复和添加代码的问题,如ctx.fill(); 对于他们所有人.你能告诉我怎么解决这个问题吗？

谢谢