Home > Developer > Web Develop
To use a canvas element, you must set its width and Height properties ! And you need to add some styles to see on the page.
2d context: To draw on a canvas, you need to get the drawing context (2d).
You can get to a 2d context object by invoking the GetContext () method with the canvas element and passing in the context's name "2d".
By invoking the relevant API with a 2d context object, you can paint freely on canvas.
Canvas drawing-JavaScript to draw images
The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:
<id= "MyCanvas" width= "Max" height= " style= "border:1px solid #000000;" > </ Canvas >
All properties and wording are as follows
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body>Brush Size:<Button>Coarse</Button> <Button>In</Button> <Button>Fine</Button> <Button>Rubber</Button> <Button>Clear Screen</Button> <inputtype= "Color"ID= "Col"value= "#e44444" /><BR/> <CanvasID= "MyCanvas"width= "The "Height= "550"style= "border:1px solid red; "></Canvas> <Scripttype= "Text/javascript">Drow (); functionDrow () {varcan=document.getElementById ("MyCanvas");//Declare a variableif(can.getcontext) {varCD=Can.getcontext ("2d");//Statement 2d Environmentvar but=document.getElementsByTagName ("Button"); vara= 1; varb= 1; but[0].onclick= function() {a=Ten;//This is the first brush} but[1].onclick= function() {a=5; } but[2].onclick= function() {a=1; } but[3].onclick= function() {b+=1} but[4].onclick= function() {Cd.clearrect (0,0, the,550); } Can.onmousedown= function(EV) {varx=Ev.clientx-Can.offsetleft; vary=Ev.clienty-Can.offsettop; Cd.beginpath (); Cd.moveto (x, y); Cd.linewidth=A; Can.onmousemove= function(EV) {if(b%2 == 1) { varNEX=Ev.clientx-Can.offsetleft;//the new point after moving varNey=Ev.clienty-Can.offsettop; Cd.lineto (Nex,ney); Cd.strokestyle=Col.value; Cd.stroke (); but[3].innerhtml= "Rubber" } Else{but[3].innerhtml= "Pencil" varNEX=Ev.clientx-Can.offsetleft;//the new point after moving varNey=Ev.clienty-Can.offsettop; Cd.clearrect (Nex,ney,Ten,Ten); }} can.onmouseup= function() {Can.onmousemove= NULL; } } } } </Script> </Body></HTML>I remember the struggle of their own, is he let the present himself, enjoy the good, to the still struggle you, hope and June mutual encouragement.
My Enlightenment--HTML5 The third chapter Canvas
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
