I dont have any html5 knowldge.
I need to do a simple floodfill - change color x to color y on existing images.
Can HTML5 do that?
Could you provide an example on how to do that?
Thanks !
I imagine it would be possible but I'm not sure of anyone who has done it yet. Here is an example of grayscaling an image. I imagine a similar technique would work.
http://spyrestudios.com/html5-canvas-image-effects-black-white/
You would need to draw that image on a <canvas> element first.
Here's how to do a fill and this tutorial describes how to load an image.
Here is good example of flood fill in HTML5 https://github.com/Flower7C3/HTML5/blob/master/canvas_floodfill.js (this is my modification of Markus Ritberger script http://code.google.com/p/canvas-floodfill/downloads/detail?name=canvas_floodfill_v1.0.1.js&can=2&q=)
Related
Hi I can't exactly find a name for it but what I am trying to accomplish is to instert an image and blend it with background using CSS gradient(for example from full white to transparent) to on frames. I used spray in photoshop to better explain. Can someone send me some tutorials or help me find a name for the action I am trying to do so I can find some tutorials? Thank you.
I think best way is make this effect with Photoshop and save as .png with transparent background instead white color of frame. Then you will be able to see background color in your website
There are definitely a few approaches you can take!
What you're looking for is:
"image masking"
There's a great answer here that outlines a few of the approaches.
Note: the question I've linked to has link-rot, but the answer is still good.
I'm trying to find some guide to accomplish this kind of shape by using CSS3:
BUBBLE EXAMPLE
And fit an image inside it. Is it possible? I wonder if this can be randomized aswell?
try to use svg it will work ..https://www.w3schools.com/graphics/svg_grad_radial.asp
I currently have a hexagonal background, but it's all one image. This generally works fine, but I may get in trouble if someone has a huge resolution. I wanted to see if it was possible to scale hexagons according to the size of your display.
Below is an example of what kind of background i'm using.
I know you're able to repeat an image with the CSS3 repeat, but not sure how I can accomplish it with something like this. Anyone have any ideas?
See If this link http://jtauber.github.io/articles/css-hexagon.html could help you do the same. Hope it helps.
I am trying to create an effect like what I have shown in the video below:
http://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be
this effect was created in Flash, but I wanted to replicate it (to as much as possible) in HTML5 and CSS3.
I have not done any thing like this before. So wanted to see if someone can help me suggested how I can do it.
Thanks
Zeeshan
Well Spider is kinda right. There are tons of canvas demos describing such particle effects:
http://codepen.io/soulwire/pen/Ffvlo (found here: >)http://davidwalsh.name/canvas-demos)
http://gwtcanvasdemo.appspot.com/
-https://developer.cdn.mozilla.net/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f696bea7b2ff62c0188/fluid_1339407870_demo_package/index.html (found in mozilla labs: https://developer.mozilla.org/en-US/demos/detail/fluid)
etc. (just do a quick google Search).
Doing this with CSS is not possible since you can't track the exact position of the mouse can't create this dependend effect, etc.... and Canvas is HTML5.
I'd like to circle mask the following:
See on maphttp://a.tiles.mapbox.com/v3/sinan.map-l9wtmm6y.html#15/41.00996511838453/28.974809646606428'>
I checked the previous topics but since I am very new to html I couldn't find the answer.
appreciate your helps.
It would depend on how you want to go about it, the simplest and unfortunately the least robust route would be to create a large .png with the alpha in the center transparent.
There are also ways to do it using html5 canvas, CSS3, etc. but I think the more important question is what you are trying to do with it before you decide the route to take. (do you need it to resize, do you need it to change colors, etc.) Here is a link to another stack overflow post that may get you on your way.
Best way to mask an image in HTML5