本文介绍了HTML5 画布上的图像渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我想在图像上获得径向渐变效果(alpha = 1 在中间，在边缘透明).
I would like to obtain a radial gradient effect on an image (alpha = 1 in the middle and transparent on the edges).
你有什么想法吗?
推荐答案
如果我没记错你想做的是:
If I'm not mistaking what you want to do is:
- 绘制图像
- 在其上绘制径向渐变，其中边框透明，中间不透明，并使用上下文中的
globalCompositeOperation设置将透明渐变与图像混合.
- Draw the image
- Draw a radial gradient over it, where the borders are transparent and the middle is opaque and using the
globalCompositeOperationsetting on the context to blend the transparency gradient with the image.
您可以很容易地将其转换为代码:http://jsfiddle.net/W8Ywp/1/.
You can rather easily translate this into code: http://jsfiddle.net/W8Ywp/1/.
var ctx = $('#cv').get(0).getContext('2d');
var img = new Image();
img.src = 'http://www.netstate.com/states/'
+ 'symb/flowers/images/oklahoma_rose.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 300); // Draw image
// Create gradient, from middle to borders
var gradient = ctx.createRadialGradient(150, 150, 0,
150, 150, 150);
// Opaque white in the middle
gradient.addColorStop(0, 'rgba(255,255,255,0)');
// Transparent white at the borders
gradient.addColorStop(1, 'rgba(255,255,255,1)');
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300); // Fill rectangle over image with the gradient
};
这篇关于HTML5 画布上的图像渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！