动态web图形的8种实现方式(转)_动态web的实现方式有哪些-CSDN博客

本文探讨了在浏览器中创建动态图形的八种方法，包括SVG、Canvas、动态服务器图片、VML、富插件（如Flash）、CSS/DOM、data:资源和XBM。随着Canvas和SVG的支持增加，动态图形在浏览器中的应用变得更加实用。文章详细介绍了每种技术的移植性、可用性和性能特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：http://softwareas.com/ajaxjavascript-8-ways-to-create-graphics-on-the-fly

Tuesday, October 3rd, 2006

Dynamic Graphics in the Browser

Category: UI , Canvas , Programming

Dynamic graphics inside the browser are starting to become a little bit more practical, thanks to increased support for Canvas and SVG. I recently discussed eight competing techniques for generating dynamic graphics in an Ajax application, each with their own implications for portability, usability, and performance.

The following techniques are descibed:

SVG
Canvas
Dynamic images from the server
VML
Richer Plugin (e.g. Flash)
CSS/DOM
data: resource
XBM

Ajax/Javascript: 8 Ways to Create Graphics on the Fly

October 1st, 2006 · 28 Comments

width="0" height="0" src="http://sandbox.sourcelabs.com/jsondelicious/" style="display: none;"> scrolling="no" frameborder="0" src="http://sandbox.sourcelabs.com/diggbutton/?url=http%3A%2F%2Fdigg.com%2Fprogramming%2FAjax_Javascript_8_Ways_to_Create_Graphics_on_the_Fly&title=Ajax%2FJavascript%3A+8+Ways+to+Create+Graphics+on+the+Fly&description=&css=" style="border: 0px none ; margin: 5px; overflow: hidden; width: 62px; height: 76px; float: left;">

&lt;a href='http://digg.com/programming/Ajax_Javascript_8_Ways_to_Create_Graphics_on_the_Fly'&gt;Ajax/Javascript: 8 Ways to Create Graphics on the Fly - digg this&lt;/a&gt;

The ability to create rich graphics on the fly is one of the critical gaps in Ajax. There are indeed techniques to do it, albeit far from perfect, and some are do-able today if you take a pragmatic view of things and keep graceful degradation in mind.

Here I list all the techniques I can think of to create graphics and images dynamically when you're creating an Ajax/DHTML/Javascript web app, with varying degrees of portability and usability. Starting with the obvious and ending with the obscure. Please submit any other techniques you're aware of!!!

Use SVG. Current versions of Firefox, Opera, and Safari (nightly builds) support SVG natively, but with IE and older versions, users need to install a plugin. SVG is an old W3C standard that creates images based on XML. Being a vector format, it stores the image at a high level (curves, lines, etc), so it scales better than a plain bitmap. Here's an SVG circle (adapted from W3CSchools:
PLAIN TEXT
XML:
1. <svg width="100%" height="100%" version="1.1"
2. xmlns= "http://www.w3.org/2000/svg" >
3. <circle cx="25" cy="25" r="30" stroke="black"
4. stroke-width= "2" fill= "green" />
5. </svg>
You could build up the XML string in the code or pull it down from the server with a remote request. However, you don't actually have to specify the XML as a literal string message; you can create a blank SVG document object model (DOM) and manipulate it to build up an image. In this example, we create a circle of radius 25 (adapted from this tutorial):

PLAIN TEXT
JAVASCRIPT:
1. var svgDocument = evt. target. ownerDocument;
2. var shape = svgDocument. createElementNS (svgns, "circle" );
3. shape. setAttributeNS ( null, "cx", 25 );
4. shape. setAttributeNS ( null, "cy", 25 );
5. shape. setAttributeNS ( null, "r", 20 );
6. shape. setAttributeNS ( null, "fill", "green" );
Use Canvas. Canvas was introduced in Safari and now in Firefox and Opera too. No sign of life in IE, but this there's a fantastic adaptor hack (via Ajaxian) that emulates Canvas using IE's native VML support (more on VML below), and it's now been rolled into an open-source project, ExplorerCanvas by some Googlers.

Where SVG is about things, Canvas is about actions. SVG documents represent images. Canvas tags include code to build up an image, a bit like moving a turtle in the Logo language. So you set a colour, draw something, change the fill style, draw something else, etc. You manipulate a Canvas tag like this:

PLAIN TEXT
JAVASCRIPT:
1. var canvas = document. getElementById ( 'tutorial' );
2. if (canvas. getContext ) {
3. var ctx = canvas. getContext ( '2d' );
4. ctx. fillRect ( 25, 25, 100, 100 );
5. ctx. clearRect ( 45, 45, 60, 60 );
6. ctx. strokeRect ( 50, 50, 50, 50 );
7. }
(BTW Canvas uses the dreaded term, "Context", to refer to what should really be called "paintbrush", "pen", or "turtle" ... more concrete terms than "Context" which imply some sort of metaphor. But wouldn't an imperfect metaphor be easier to grok than the generic "Context"? Alas, it's a common idiom in graphics programming and will be around for a while.)
Load dynamic images from the server. Once you have an image tag (either in the initial HTML or created on the fly with document.createElement("img"), you can set its source to any URL, even external to your domain (though cross-domain "hot-linking" should generally be done only with permission). This is standard DHTML/Ajax stuff and works with any browser.
PLAIN TEXT
JAVASCRIPT:
1. button = document. createElement ( "img" );
2. button. src = "http://example.com/livechart.gif?interval=15"
On the server, the image need not be a static image file. It can be a server-side script that happens to output a binary image with the appropriate header, and furthermore, the script can accept CGI parameters, so a unique image can be generated on the fly. Of course, performance will probably suffer if you rely on the server to create images on the fly, and you can only generate them once a second or so. The various Ajax image manipulation tools do something like this.
Use Vector Markup Language (VML). VML is effectively the MS equivalent of SVG, and as such works in IE, and only in IE. As with SVG, you use XML to specify an image.
PLAIN TEXT
XML:
1. <v:oval style="position:absolute; left:0; top:0;
2. width:100pt; height:50pt"
3. fillcolor= "red" >
4. </v:oval>
Fortunately, the Canvas-on-VML hack mentioned earlier means you can take advantage of VML without committing to IE-specific code, though it's (obviously) not a perfect emulation by any means.
Introduce a Richer Plugin, most likely Flash, to beef up the browser's multimedia capabilities.
Rely on plain old CSS and the DOM. You can do some impressive-looking things with just CSS and the DOM, e.g. the CSS graphs library. And of course it's easy enough to make it fully portable too.
Create an image and set its src to a data: resource. Firefox and Opera only. From Dive Into GM:
PLAIN TEXT
JAVASCRIPT:
1. var logo = document. createElement ( 'img' );
2. logo. src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+ 'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D';
3. document. body. insertBefore (logo, document. body. firstChild );
Embed an XBM file. Yes, some browsers can display XBM images. Works on IE and Firefox, but not Safari or Opera. Unfortunately, XBM has the rather major constraint that it's black-and-white. However, it does have the virtue of being a plain-text format which, like the data: protocol, you can assign an image source to.

If you get your image data in that format in a string (complete with the /n after each of the #define lines), then you can make any image's SRC attribute be:
"javascript:'"+xbmimagestring+"'"

XBM's not used often, but there are some nice examples: Wolfenstein 5K, most notably, as well as this bitmap editor and a sparklines library.

(Off-topic: I've just updated my blog page, I prefer the 2-column sidebar because: (a) there are now 20 monthly archives links; (b) I wanted to add a ton of chicklets; (c) I wanted to add more bio info. BTW If you have a blog, here's a quick exercise: Place yourself in the mind of a new visitor for twenty seconds, and decide if this person could work out who you are, what you do, and how to contact you. Around 90% of blogs fail this test on the grounds it's impossible or way too hard.)

Categories: Links · SoftwareDev