使用canvas和js的图像透明渐变，使用canvasimagegradient答案

【问题标题】：image transparent gradient with canvas and js, using canvasimagegradient使用canvas和js的图像透明渐变，使用canvasimagegradient
【发布时间】：2011-01-31 09:32:59
【问题描述】：

我尝试使用这个简单的功能： http://code.google.com/p/canvasimagegradient/ 我必须用画布和 js 创建一个线性透明渐变（我的图像必须是动态的）但我的代码它不起作用.. 你能告诉我哪里错了吗？

var ctx = $('#thecanvas')[0].getContext("2d");
var theImage= $('#theimage');

var linearGradient = ctx.createLinearGradient(0, 0, 0, theImage.height);
linearGradient.addColorStop(0, "transparent");
linearGradient.addColorStop(1, "#000");

ctx.drawImageGradient(theImage, 12, 65, linearGradient);

调试器只是告诉我：控制台说我：

NOT_SUPPORTED_ERR: DOM Exception 9: The implementation did not support

就在这一行下面：

var linearGradient = ctx.createLinearGradient(0, 0, 0, theImage.height);

提前非常感谢:)

【问题讨论】：

标签： javascript image image-processing canvas gradient

【解决方案1】：

是因为您将图像作为 jQuery 对象获取，其中高度是一个函数，而不是一个属性？所以你应该有theImage.height()，而不是theImage.height？

【讨论】：

不错的收获。或者，theImage[0].height.
非常感谢！直接来自函数的创建者："ctx.fillStyle = "#FFF"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);"您必须在应用渐变之前填充画布