1. Get started with canvas
<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en"
Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<SCRIPT type = "text/JavaScript" src = "jquery-1.6.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "debug_lele.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "canvas. js"> </SCRIPT>
</Head>
<Body style = "margin: 0px; padding: 0px; overflow: hidden;">
<Canvas id = "_ root_canvas" width = 640 Height = 480 style = "margin-left: 100px; margin-top: 100px; border-style: solid; border-color: # ff0000; border-width: 1px; ">
Your browser does not support the Canvas Element.
</Canvas>
</Body>
</Html>
// Disable mouse default right-button menu and left-button select of Mouse
$ (Document). BIND ("contextmenu ", Function (){ Return False ;});
$ (Document). BIND ("selectstart ", Function (){ Return False ;});
Function Pixel (x, y)
{
This . Linewidth = 1;
This . MoveTo (x, y );
This . Lineto (x + 1, Y + 1 );
This . Stroke ();
}
$ (Document). Ready ( Function (){
// VaR _ root_canvas = Document. getelementbyid ("_ root_canvas ");
VaR Canvas = $ ("# _ root_canvas"). Get (0 );
VaR Cxt = canvas. getcontext ("2D ");
VaR _ Drag_draw = False ;
Cxt. strokestyle = "rgba (255, 0, 0,255 )";
Cxt. pixel = pixel;
/*
Cxt. moveTo (10, 10 );
Cxt. lineto (150,50 );
Cxt. moveTo (10, 10 );
Cxt. lineto (10, 50 );
Cxt. Stroke ();
*/
$ ('# _ Root_canvas'). mousedown (
Function ()
{
_ Drag_draw = True ;
}
);
$ ('# _ Root_canvas'). mouseup (
Function ()
{
_ Drag_draw = False ;
}
);
$ ('# _ Root_canvas'). mousemove (
Function (E)
{
Ddd. debugging. writeline ("_ root_canvas mousemove page X is {0}, page y is {1}, offset X {2}, offset y {3}", E. pagex, E. pagey, E. offsetx, E. offsety );
If (_ Drag_draw)
Cxt. pixel (E. offsetx, E. offsety );
}
);
});
2. Set the width and height of the canvas.
var canvas = document. getelementbyid ("mycanvas");
// canvas. style. width = right-left + "PX";
// canvas. style. height = bottom-top + "PX";
canvas. setattribute ('width ', Right-left + "");
canvas. setattribute ('height', bottom-top + "");
you cannot set the style !!!!