HTML 5画布填充颜色

尼尔玛·拉姆(Nirmal Ram)

我的以下脚本有问题

var ctx = demo.getContext('2d'),
    w = demo.width,
    h = demo.height,
    img = new Image,
    url = 'http://i.imgur.com/1xweuKj.png',
    grd = ctx.createLinearGradient(0, 0, 0, h);

grd.addColorStop(0, 'rgb(0, 130, 230)');
grd.addColorStop(1, 'rgb(0, 20, 100)');

img.onload = loop;
img.crossOrigin = 'anonymous';
img.src = url;

function loop(x) {
    /// since we will change composite mode and clip:
    ctx.save();

    /// clear background with black
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, w, h);

    /// remove waveform, change composite mode
    ctx.globalCompositeOperation = 'destination-atop';
    ctx.drawImage(img, 0, 0, w, h);

    /// fill new alpha, same mode, different region.
    /// as this will remove anything else we need to clip it
    ctx.fillStyle = grd;
    ctx.rect(0, 0, x, h);
    ctx.clip();    /// et clipping
    ctx.fill();    /// use the same rect to fill

    /// remove clip and use default composite mode
    ctx.restore();

    /// loop until end
}

当我这样做时loop(40),如果我这样做了,loop(50)那么它也会工作,但是当我想提供loop(20)比当前值小的值(如)时,它不起作用。

有人可以让我知道这里出什么问题吗?

它适用于所有增加的值,但不适用于减少的值。

检查jsfiddle

尼尔玛·拉姆(Nirmal Ram)

我想出了解决方法,现在可以正常工作了。

我通过实现了它 ctx.beginPath();

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在点击事件中更改HTML5画布的填充颜色?

来自分类Dev

HTML5画布图形悬停填充

来自分类Dev

透明颜色HTML5画布

来自分类Dev

html5画布包含颜色选择

来自分类Dev

用图片填充HTML5弧-HTML5画布

来自分类Dev

用图片填充HTML5弧-HTML5画布

来自分类Dev

禁用html5画布

来自分类Dev

了解HTML5画布

来自分类Dev

禁用html5画布

来自分类Dev

文字旋转HTML 5画布

来自分类Dev

HTML5画布脉动

来自分类Dev

快照HTML 5画布

来自分类Dev

HTML5画布脉动

来自分类Dev

HTML 5画布隐藏?

来自分类Dev

在HTML5画布中填充后的抗锯齿边缘?

来自分类Dev

HTML5画布-用描边剪切填充区域

来自分类Dev

HTML5画布-alpha <1时,相同的RGBA样式产生不同的颜色

来自分类Dev

背景颜色会影响HTML5画布中的帧频吗?

来自分类Dev

HTML5画布将颜色应用于形状重叠的图像

来自分类Dev

HTML5画布使圆圈在画布内闪烁

来自分类Dev

使用html5画布中的输入表单中的图像和文本填充活动气泡

来自分类Dev

如何使该HTML5画布进度栏从下至上而不是从上至下填充?

来自分类Dev

HTML5画布-绘制线段和圆-一个圆使用不同的颜色

来自分类Dev

HTML5画布,适合(其余)屏幕

来自分类Dev

HTML5画布叠加图像

来自分类Dev

HTML5画布图像变色

来自分类Dev

html5画布圆圈调色板

来自分类Dev

使用WebRTC流HTML5画布活动

来自分类Dev

在html5画布内制作重力效果