标签: html5-canvas

我正在开发一个极简主义的图像创建项目,我需要能够在浏览器中创建在服务器上反过来使用的图像.到目前为止,该Canvas.toDataUrl()方法已经满足了我们的需求,但我刚刚学会Canvas.toBlob()了更方便的方法.

似乎该toBlob()方法对规范来说是新的几个月(我找不到任何直接引用它的时间.)

哪些浏览器支持toBlob,更重要的是哪些版本的浏览器包含该方法的集成？此外,是否支持此功能"buggy"或正在开发任何主流浏览器？

UPDATE

我8个月前问了这个问题.我已经提交了我之前提到的项目,等待canvas.toBlob()方法状态的任何更新.从我可以在网上收集的内容来看,实现toBlob()似乎是在某些浏览器中使用.

我再次问,canvas.toBlob()开始集成HTML5画布对象的浏览器中哪种方法无处不在,哪些版本的浏览器是第一个集成这种支持的？

我正在尝试使用Javascript将画布添加到一个原本没有的画面.我正在尝试执行以下操作:

var canv=document.createElement("canvas");
canv.setAttribute("id", "canvasID");
alert(canv.id);
var c=document.getElementById("canvasID");
alert(c.id)?;

问题是第一个警报(canv.id)导致canvasID,而第二个警报未定义,因为c为null.

谁能告诉我我做错了什么？

PS:代码设计为在Greasemonkey下运行,因此在HTML本身中添加画布及其ID不是一个可行的选择.

有没有办法在画布中呈现任意HTML元素(然后访问其缓冲区......).

我试图在我发现的这个画布脚本的背面放置一个背景图像.我知道这与context.fillstyle有关,但不知道如何去做.我想要那条线来读这样的东西:

context.fillStyle = "url('http://www.samskirrow.com/background.png')";

这是我目前的代码:

var waveform = (function() {

var req = new XMLHttpRequest();
req.open("GET", "js/jquery-1.6.4.min.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/soundmanager2.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/soundcloudplayer.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/raf.js", false);
req.send();
eval(req.responseText);

// soundcloud player setup

soundManager.usePolicyFile = true;
soundManager.url = 'http://www.samskirrow.com/client-kyra/js/';
soundManager.flashVersion = 9;
soundManager.useFlashBlock = false;
soundManager.debugFlash = false;
soundManager.debugMode = false;
soundManager.useHighPerformance = true;
soundManager.wmode = 'transparent';
soundManager.useFastPolling = true;
soundManager.usePeakData = true;
soundManager.useWaveformData = true;
soundManager.useEqData = true;

var clientID = "345ae40b30261fe4d9e6719f6e838dac";
var …

看起来从画布中清除区域的唯一方法是使用clearRect()命令 - 我需要清除一个圆圈(我在填充的画布上掩盖区域,在这个特定情况下指向灯光)并尽管所有尝试它似乎不可能.

我尝试绘制一个alpha值为0的圆圈,但除非alpha更高(这与点相反:P),否则不会出现任何内容 - 我假设因为contex.fill()将其绘制为添加而不是替换.

关于我如何能够(快速)清除圆圈以进行掩模的任何建议？

我必须使用python后端在浏览器上绘制图表(这可能无关紧要).为实现这一目标,有许多图书馆,如JQPlot,D3,Google Charts.

但是如果你对它们进行分类,它们要么基于HTML5 Canvas,要么基于SVG.两者都是他们自己领域的重要技术.但

for charting as a subject, shall I go with SVG based libraries or 
HTML5 Canvas based libraries. What are downside and benefits of 
both approaches. 

我没有任何绘图经验,也不想在我启动项目后碰壁.

假设我在HTML5画布上有一个圆圈(弧形).我可以像这样填写:

ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

它是一种享受.但是,如何填补相反的区域？现在它是白色的黑色圆圈,但我希望它沿着下图的线条(白色是背景颜色,黑色是填充颜色):

我知道我可以使用黑色背景并绘制一个白色圆圈,但背景可以是任何东西(之前已经绘制过各种各样的东西,所以只能交换颜色).

另一件事是不应该填充完整的画布,而是取消圆圈的正方形.

我在想一个,globalCompositeOperation但它似乎不符合我的需要,因为它们都没有根据我的需要行事.

那么,如何在示例图像中完成填充"对面"区域？

我在画布上使用了clip()函数.

结果:

正如你所看到的那样,镀铬版本沿着边缘有可怕的锯齿/锯齿.我该如何解决？

代码重现:

http://jsfiddle.net/ZRA76/:

<canvas id="test" width="300" height="300"></canvas>?

<script type="text/javascript">
    cv = document.getElementById("test");
    ctx = cv.getContext("2d");

    var im = new Image();
    im.onload = function () {
        ctx.beginPath();
        ctx.arc(110, 110, 100, 0, 2*Math.PI, true);
        ctx.clip();
        ctx.drawImage(im, 0, 0);
    }
    im.src = "http://placekitten.com/300/300";
</script>

Font Awesome有一个非常好的图标集合,可用于Web项目.我想使用其中一个图标作为光标(自定义光标).

根据我的理解,Custom Cursors需要一个图片网址,但我无法找到Font Awesome图标的图片网址.

如果我想构建一个简单的游戏(蛇,跳棋,pacman或其他什么)什么是更好的方法 - SVG或Canvas？

我感兴趣的事情:

1. 易于实施(Canvas与SVG的学习曲线).例如,如果SVG的教程和社区支持显着减少对我来说至关重要.

2. 表现(对我来说并不重要,但仍然很重要)

而且,在游戏领域,是否存在SVG比Canvas更适合的特定游戏(反之亦然？)