Question

Like rounded corner for web pages,

I want to draw it by setting the parameters and programatically.

EDIT

It should be able to generate image like alt text
(source: alistapart.com)

Was it helpful?

Solution

Basically, you would draw on a bitmap in RAM to generate the picture, then either save it as a GIF file, or emit it directly to the browser, telling it that you are sending a GIF file. You will have to do the same kind of tiling and positioning of separate elements that web designers do in Photoshop, except that your code will do the work.

For one possible library see libgd here where you would probably use line() to draw the straight lines and arc() to draw the corners. Of course, to get a shaded line, you need to draw multiple lines, offsetting a bit each time and changing the color.

To see how web designers do it, have a look at this page. Note the list of corner images that are used. Before coding, it always helps to understand alternate ways of doing it. You might prefer leveraging CSS instead, which is probably easier to code.

I don't recommend using any canvas because most browsers don't support it, and for much the same reason, I don't think that SVG is a good way to do it for general purpose websites where you are just dressing up the look of the content.

OTHER TIPS

Can't you use SVG format? You can generate SVG files programmatically.

try SVG or Canvas ?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top