javascript - Is it possible to make a gradient-transparent/layer masking image using canvas? -

-

i've been following lessons transparency , gradients on mozilla site: https://developer.mozilla.org/en-us/docs/web/guide/html/canvas_tutorial/applying_styles_and_colors have not been able figure 1 out.

i know can achieve these effects png image; however, in program working on gradient change according image moved.

here's example of effect i'm looking for. http://home.insightbb.com/~epyonxl1/gradientex.jpg

i've aded code here http://code.google.com/p/canvasimagegradient/ adds drawimagegradient function canvasrenderingcontext2d. can draw image linear or radial gradient. doesn't work in ie, excanvas, due lack of getimagedata/putimagedata support.

the following code example draw image radial gradient (context retrieve , image load not shown):

var radgrad = ctx.createradialgradient(     img.width / 2, img.height / 2, 10,      img.width / 2, img.height / 2, img.width/2); radgrad.addcolorstop(0, "transparent"); radgrad.addcolorstop(1, "#000");  ctx.drawimagegradient(img, 112.5, 130, radgrad);

the code works follows:

  1. create canvas element dynamically , draw image on it.
  2. retrieve imagedata new canvas.
  3. retrieve imagedata location on canvas want draw image on to.
  4. iterate through destination imagedata , update each pixel adding percentage (derived gradient transparency value) of image , destination pixel values.
  5. finally put updated image data onto destination canvas.

obviously performance issue images larger. image on http://code.google.com/p/canvasimagegradient/ takes 6-10ms draw. 1024x768 image takes 100ms-250ms draw. still usable though long you're not animating.


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more