标签: 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/

有任何想法如何覆盖默认黑色？

这似乎requestAnimationFrame是现在制作动画的事实上的方式.在大多数情况下,它对我来说效果很好,但是现在我正在尝试做一些画布动画,我想知道:有没有办法确保它以某个fps运行？我知道rAF的目的是为了一贯平滑的动画,我可能冒着使我的动画不稳定的风险,但是现在看起来它的速度几乎是任意的,并且我想知道是否有办法打击不知何故.

我使用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()只是一些代码,它根据计数器变量确定半径,然后绘制一个圆.

我目前正在研究在新的HTML 5应用程序中使用canvas的选项,并且想知道HTML canvas JavaScript库和框架中当前的最新技术水平是什么？

特别是,是否有框架支持游戏开发所需的东西 - 复杂的动画,管理场景图,处理事件和用户交互？

也愿意考虑商业和开源产品.

使用context.moveTo()和context.lineTo()函数在HTML5画布上绘制一条线非常简单.

我不太确定是否可以绘制一个点,即单个像素的颜色.lineTo函数不会绘制单个像素线(显然).

有没有办法做到这一点？

是否可以查询HTML Canvas对象以获取特定位置的颜色？

我正在使用一个画布元素,其高度600为1000像素,宽度为几十或几十万像素.然而,在一定数量的像素(显然未知)之后,画布不再显示我用JS绘制的形状.

有谁知道是否有限制？

在Chrome 12和Firefox 4中都进行了测试.

我已经考虑了一段时间了,所以现在我想知道你的意见,可能的解决方案等等.

我正在寻找一种插件或技术来改变文本的颜色或在预定义的图像/图标之间切换,具体取决于它的父母的背景图像或颜色的覆盖像素的平均亮度.

如果其背景的覆盖区域相当暗,请将文本设为白色或切换图标.

另外,如果父脚本没有定义背景颜色或-image,然后继续搜索最接近的(从父元素到它的父元素......)脚本会发现它会很棒.

您怎么看,知道这个想法？那里有类似的东西吗？脚本的例子吗？

干杯,J.

如何在画布中打开图像？这是编码的

我正在使用

var strDataURI = oCanvas.toDataURL(); 

输出是编码的基础64图像.如何在画布上绘制此图像？

我想使用strDataURI 和创建图像？它是poosible？
如果不是那么可能是什么可能是在画布上加载图像的解决方案？

我一直在寻找解决方案一段时间,但没有找到任何东西.也许这只是我的搜索条件.好吧,我正在尝试根据浏览器窗口的大小制作画布中心.画布是800x600.如果窗口低于800x600,它也应该调整大小(但目前这不是很重要)

我正在用HTML中的新canvas元素进行一些实验.

我只是想在画布上添加一个图像,但由于某些原因它不起作用.

我有以下代码:

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

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

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

图像存在,我没有JavaScript错误.图像不显示.

它一定是非常简单的我错过了......