jQuery plugin Flot chart drawing

August 17, 2010
Ole Laursen in the use of Plotr and PlotKit (all chart drawing library) when inspired, developed a jQuery-based diagramming plug ─ ─ Flot. Can only draw the line graph and bar chart, it is estimated will soon support more charts. With the draw diagrams, but also provides an arbitrary graph scaling function!
Folt fairly simple to use, and the charts look very attractive, can be scaled with this interactive feature, Flot is entirely possible applications in the business of Web applications! Flot is based on the canvas in the drawing, Firefox and Safari and other browsers have native support for canvas, though IE does not support, but can be solved through a small plug-in. Now, look at the effect of under Flot graph it: (The following is only a screenshot, Flot is not completely drawn the chart image files)




is not very exciting:) Following is a brief under Flot use. First download the latest version of the jQuery charting plugins Flot: jquery.flot-0.1.pack.js is jquery.flot-0.1.js compressed version. excanvas.pack.js is the canvas support IE browser plug-ins. You can be the introduction of excanvas script file:

Another point to note that, Flot need the latest version of jQuery 1.2.1.
Then, create a placeholder on the page:

Of course, you can also apply layer styles Div:

in the script file to add the next simple jQuery code:
$. plot ($(“# placeholder “), data, options);
done ! In the above jQuery code, the parameter data is a chart of the data array, options is a plot of a set of optional parameters. Concrete can see Flot API documentation and examples.
References:

Canvas tutorial (2): HTML5 Canvas Overview

February 12, 2011
is a new HTML element, this element can be Script language (usually JavaScript) used to draw graphics. For example, you can use it to paint, synthetic images, or do simple (and not so simple) animations. Right image shows some application examples in this tutorial we will see them realized.
first in Apple (Apple) on the Mac OS X Dashboard was introduced, and after being used in Safari. Based on Gecko1.8 browser, such as Firefox 1.5, also support this new element. Element is WhatWG Web applications 1.0 is we all know the HTML 5 standard specification.
In this tutorial, I will try to describe how to use your own web page element. Provides a clear example should give you some idea, that what can be done with . These examples also serve as a starting point for your application .
Before you start with the elements
not difficult, as long as you have the basics of HTML and JavaScript.
As noted above, not all modern browsers support

elements, so you need Firefox 1.5 or later, or other Gecko-based browser such as Opera 9, or the latest version of Safari to see all the examples of the action.
1.Canvas that?
html5 Canvas can be found at the following complete definition of
http://www.whatwg.org/specs/web-apps/current-work/ # the-canvas < br />
now Firefox 2, safari directly support Canvas, IE needs a ExCanvas the js code base conversion.
The following can be found at ExCanvas [js libraries yet available for this arcto (), clip () support, so its based on a variety of natural components can not generate the chart pie chart]

http://excanvas.sourceforge.net/
Mozilla Canvas entry
http://developer.mozilla.org/en/docs/Category : HTML: Canvas
Mininova Canvas entry
http://labs.mininova.org/canvas/
2.Canvas can do ?
(1) Msx emulator
It emulates the underlying Z80 CPU, TMS9918 Video Display Processor (VDP), PPI, RAM slots and Megaram. In its present form, it should be able to run any program or game developed for MSX 1.0.
Z80 and other hardware simulation with js, read rom information, silent game
http://jsmsxdemo. googlepages.com / jsmsx.html
(2) Painter
if performance permits, may also develop into a Web photo thing.
http://caimansys.com/painter/index.html
(3) the effect of water ripples

http://timelessname.com/canvas/experiment01/
visual model of a fuzzy theory
http://timelessname.com/canvas/experiment02/

(4) 3D
polyhedron
http://www.polyhedra.org/poly/
3D map
Mozilla example, RayCaster is a.
Canvascape – 3D walker, better than some of the above examples, it also provides texture mapping function
a similar CS interface
http:/ / www.abrahamjoffe.com.au/ben/canvascape/
(5) chart components
forming a WebFx Chart, Flot, etc., need to be on their own search.
3.Canvas development
(1) Canvas code into the flash (porting canvas to flash)
http://team.mixmedia .com / index.php? title = porting_c anvas_to_flash

j2me Wizard animation to achieve the classic case studies – iteye technology website

August 1, 2011
=================== j2me Wizard animation to achieve the classic case study ==========
Today Beijing Qinghe Miles, particularly cheerful mood, now in training students more obedient here, is also more to love learning, in general people feel particularly pro, now written the day before j2me animation to achieve the spirit to share with you, we want to help.
j2me animation game overall feeling is relatively easy to understand, as long as you can reflect changes to the point of view is how the animation wizard then you realize it should be understood not a problem.
Oh. . I said so much to see how to achieve the wizard animation
/ / This article is reproduced Please do not write your own, or to pay the liability package com.redarmy.canvas01; import javax.microedition.lcdui.Canvas ; import javax.microedition.lcdui.Graphics; public class ExCanvas extends Canvas {public int px = 60, py = 80; / / the starting coordinates public int arc1 = 30, arc2 = 280; / / starting point / / elf direction is defined public static final int UP = 1; public static final int DOWN = 2; public static final int LEFT = 3; public static final int RIGHT = 4; / / initialize the direction of the public int DIR = 4; protected void paint ( Graphics arg0) {arg0.setColor (0, 255, 0); arg0.fillRect (0, 0, this.getWidth (), this.getHeight ()); arg0.setColor (255, 0, 0); switch (DIR ) {case UP: arg0.fillArc (px, py, 50, 50, arc1 90, arc2); / / turn up the degree of 90 ° break; case DOWN: arg0.fillArc (px, py, 50, 50, arc1 270, arc2); / / Turn down the degree of 270 ° break; case LEFT: arg0.fillArc (px, py, 50, 50, arc1 180, arc2); / / to the right degree of 180 ° break; case RIGHT: arg0.fillArc (px, py, 50, 50, arc1, arc2); / / initialize the direction of 0 ° break; default: break;}} / / key handler protected void keyPressed (int keyCode) {System.out.println (keyCode); arc1 = 30; arc2 = 280; / / When the button when the angle changes / / right if (keyCode ==- 4| keyCode == 54) {DIR = RIGHT; px = 8; if (px> = this.getWidth ()) {px = 0;}} / / next if (keyCode ==- 2| keyCode == 56) {DIR = DOWN; py = 8; if (py> = this.getHeight () ) {py = 0;}} / / the if (keyCode ==- 1| keyCode == 50) {DIR = UP; py-= 8; if (py <= 0) {py = this.getHeight () ;}} / / left if (keyCode ==- 3| keyCode == 52) {DIR = LEFT; px-= 8; if (px <= 0) {px = this.getWidth ();}} this. repaint ();} protected void keyReleased (int keyCode) {arc1 = 50; arc2 = 240; / / When you release the key is the angle changes this.repaint ();} protected void keyRepeated (int keyCode) {}} / / < br />
/ / test class package com.redarmy.canvas01; import javax.microedition.lcdui.Display; import javax.microedition.midlet.MIDlet; import javax.microedition.midlet.MIDletStateChangeExcepti on; public class AppMain extends MIDlet {public ExCanvas ecs; public AppMain () {ecs = new ExCanvas ();} protected void destroyApp (boolean arg0) throws MIDletStateChangeException {} protected void pauseApp () {} protected void startApp () throws MIDletStateChangeException {Display.getDisplay (this ). setCurrent (ecs);}}
above article are my own writing, please do not arbitrarily reproduced, or legal responsibility to pay. If in doubt, please send E-mail: RedArmy.Chen @ gmail.com I will get back to you

j2me to achieve classic case of people moving, one-dimensional array to achieve – iteye technology website

August 1, 2011
j2me people move to implement the classic case study
/ / bottom of the screen class package com.canvas.image02; import java.io.IOException; import javax.microedition.lcdui.Canvas; import javax.microedition.lcdui.Graphics; import javax.microedition.lcdui.Image; public class ExCanvas extends Canvas {/ / used to achieve one-dimensional array of images of people walking around public Image imbg; / / background Image public Image imPlayer; / / images of people / / define action figures based on the direction of the image array public int upImage [] = {12, 13, 14, 15}; / / the public int downImage [] = {0, 1, 2 , 3}; / / The following public int leftImage [] = {4, 5, 6, 7}; / / left public int rightImage [] = {8, 9, 10, 11}; / / right / / initialization character of the current frame public int nowPlayer = 0; / / define the character direction: public static final int DIR_UP = 1; / / the public static final int DIR_DOWN = 2; / / The following public static final int DIR_LEFT = 3; / / left public static final int DIR_RIGHT = 4; / / Right public static final int DIR_STOP = -1; / / stop / / initialize the first character in the direction public int dir = DIR_STOP; / / initialize the character coordinates public int px = 80, py = 80; / / create the content type of the thread: class Mythread extends Thread {public void run () {while (true) {if (dir> = 1

Use excanvas.js achieve Topology

June 9, 2011
recently looked excanvas.js, feeling is a good thing.
always wanted to use js to achieve topological features, just try. Use the latest version of the excanvas.js, also uses jquery and jquery ui to the latest version.
renderings are

four nodes can be dragged with the mouse , the connection between the line will follow the re-painting.
js code below
$. jvChart = $. jvChart| {};
$. extend ($. jvChart, {
createElement: function (tag, attribs, styles, parent, nopad) {
var el = document.createElement (tag);
if (attribs ) $ (el). attr (attribs);
if (nopad) $ (el). css ({padding: 0, border: one margin: 0});

if (styles) $ (el). css (styles);
if (parent) parent.appendChild (el);
return el; < br />
},
drawEllipse: function (paper, x, y, rx, ry, color, width, fill, shadow, image) {
var ctx = paper.ctx;
ctx.beginPath ();
var div = document.createElement (“
“; width: ” rx ” ; height: ” ry “; gt;”);
$ (paper.canvas). append (div);
ctx.element_ = div;
$ (div). draggable ({
stop: function (event, ui) {
$. jvChart.reDrawConnections (paper);
}
});
x = y = 0;
var hB = (rx / 2) *. 5522848,
vB = (ry / 2) * .5522848,
eX = x rx,
eY = y ry, < br />
mX = x rx / 2,
mY = y ry / 2;
ctx.moveTo (x, mY);
ctx.bezierCurveTo (x, mY – vB, mX – hB, y, mX, y);
ctx.bezierCurveTo (mX hB, y, eX, mY – vB , eX, mY);
ctx.bezierCurveTo (eX, mY vB, mX hB, eY, mX, eY);
ctx.bezierCurveTo (mX – hB , eY, x, mY vB, x, mY);
ctx.closePath ();
if (color