相关疑难解决方法(0)

我可以在HTML5画布上绘制一个简单的圆圈,但我想在它周围添加一些模糊.

我发现这个网站解释了shadowBlur这个可以派上用场的房产.

但是,我无法让圆圈变得模糊.该shadowBlur属性基本上是在绘制常规圆后绘制一些模糊效果.到目前为止,我已经尝试过jsFiddle.

可以看出,它是一个实心的圆形,周围有一些模糊效果 - 这两个部分根本不会相互融合.我实际想要实现的是圆圈本身完全模糊如下:

有没有办法画出这样的模糊圆圈,即圆圈本身也有模糊效果？

我正在关注WC3上的教程:http://www.w3schools.com/tags/canvas_getimagedata.asp

我把我的图像加载了,旁边是画布,我有一个漂亮的寄宿生,我打算显示并排图像.我试图反转像素的颜色作为演示,但我不能让颜色改变我不明白为什么.

这是我的代码笔,我将HTML与JS分开:http: //codepen.io/kKasper/pen/zBXWOZ

document.getElementById("team").onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("team");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
};

看来是ctx.drawImage(img,0,0); 正在画布中绘制我的图像.出于某种原因,在WC3教程上工作的功能在我的图像上无法正常工作,因为当它在函数之后绘制图像时没有任何变化.

有人可以帮我解决这个问题吗？