Home > Developer > Web Develop
Canvas is the focus of the HTML5; today, a simple study, a summary of the concept of canvas, canvas is to have an object-oriented thinking; Each label is like a watercolor painting, we need to pay attention to the order of label use
Canvas is a canvas; You can draw lines, shapes, fills, and so on. Manipulate pictures and text. Operation mode is to use JS, can provide 2d graphics, 3d graphics drawing;
Canvas Uses:
①<canvas id= ' MyCanvas ' width= ' height= ' ></canvas>
Need to have an ID, the size of the canvas;
② Gets the context by retrieving the DOM object of the canvas by ID;
var Canvasdom=document.getelementbyid (' canvas ')
var context=canvasdom.getcontext (' 2d ')
Operation of the context two default mode: 1, Draw line (stroke) 2, fill (fill);
MoveTO (x, y) move x, y
LineTo (x, y) connection to X, y
Stroke ();
LineWidth: Draw the thickness of the line;
FillRect (x,y,width,height) fills the rectangle;
Clearrect (x,y,width,height) clears the canvas area and clears the phenomenon of duplicate drawing
Beginpath--> open a new path;
Closepath---> Closed path;
Stroke ()---> stroke;
Fill ();--->> fill;
LineWidth---"line width;
LineJoin-----> Connection point style;
LINECAP------> Thread style;
Strokestyle---> Stroke color;
FillStyle-------> Fill color;
Draw a line
<body><canvas id= "MyCanvas" width= "height=" ></canvas><script>varOcanvas=document.queryselector (' Canvas ') varCtx=mycanvas.getcontext (' 2d ') Ctx.moveto (x, y)//x, y coordinatesCtx.lineto (x, y)//draw to X, y this positionCtx.linewidth= ' 10 '//draw a line width of 10px;ctx.strokestyle= ' Red '//Draw Line ColorCtx.fillstyle= ' Blue '//Fill ColorCtx.stroke ()//StrokesCtx.fill ()//</script></body>
Draw a rectangle
<body><canvas id= "MyCanvas" width= "$" height= "></canvas><script> var " Ocanvas=document.queryselector (' canvas ') var ctx=mycanvas.getcontext (' 2d ') Ctx.strokestyle= ' red '; Ctx.strokerect (10,10,190,100)// draws a rectangle to receive 4 parameters. X,y,width,height ctx.fillstyle= ' Blue ' ctx.fillrect (110,110,100,100)</ Script>Draw a Circle
<canvas id= "MyCanvas" width= "height=" ></canvas><script>varOcanvas=document.queryselector (' #mycanvas ') varCtx=ocanvas.getcontext (' 2d ') Ctx.beginpath ();//open a new path //draws the circle receives the parameter center x coordinate, the center y coordinate, the radius, the beginning angle ending angle is counterclockwise;Ctx.arc (250,250,100,0,math.pi*2,true) Ctx.fillstyle= ' Red 'Ctx.fill (); Ctx.closepath ();//Closed Path //left EyeCtx.beginpath (); Ctx.arc (200,230,10,0,math.pi*2,true) Ctx.fillstyle= ' Black 'Ctx.fill (); Ctx.closepath (); //Right EyeCtx.beginpath (); Ctx.arc (300,230,10,0,math.pi*2,true) Ctx.fillstyle= ' Black 'Ctx.fill (); Ctx.closepath (); //MouthCtx.beginpath (); Ctx.arc (250,270,50,0,math.pi,false) Ctx.fillstyle= ' Yellow 'Ctx.fill (); Ctx.closepath ();</script>
<body> <canvas width= "height=" ></canvas> <script>varOcanvas = document.queryselector (' Canvas '); varCTX = Ocanvas.getcontext (' 2d '); Ctx.fillstyle= ' Rgba (12,32,212,0.4) '//Add Data vardata =[Rnd (100,1000), Rnd (100,1000), Rnd (100,1000), Rnd (100,1000), Rnd (100,1000) ]; varmax = Math.max.apply (NULL, data); //Cyclic dataData.foreach (function(number,index) {var{height, width}=Ocanvas; varH = number/max*heightvarW = index*width/data.lengthCtx.fillrect (W,height-h,60, h); }) functionRnd (n,m) {returnparseint (Math.random () * (m-n) +N)}</script></body>
I tried a small way to download your own drawing pictures
// Add a click button to the body, create a tag when clicked, and change the href attribute of the A tag, using the Todataurl method on the canvas; var obtn=document.queryselector (' button '); Obtn.onclick=function() { var oa=document.createelement (' a ') Oa.href=ocanvas.todataurl (); Oa.download= ' data graph. png ' Oa.click (); }To summarize here, I later wrote a small example to consolidate the knowledge learned; Paste the code Welcome to correct me, after all, I am still so low.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">body{background:#000; } canvas{background: #FFF;}</style>varOcanvas=document.queryselector (' #mycanvas ') varCtx=ocanvas.getcontext (' 2d ') varSpeed=4varAngle=0varN=0SetInterval (function() {Ctx.clearrect (0,0, Ocanvas.width,ocanvas.height) Ctx.beginpath (); Ctx.moveto (N,250) Ctx.arc (n,250,20,D2R (angle), D2R (360-angle),false) n++; Ctx.fillstyle= ' Pink 'Ctx.closepath (); Ctx.stroke (); Ctx.fill (); Angle+= Speedif(Angle > | | angle<0) { speed*=-1 } },16) //convert degrees to radians functionD2R (degree) {returnDegree/180*math.pi; }</script></body>This is a greedy bean's head, only to do the mouth closed behind himself in the game effect written out;
This is a slightly more complex screensaver problem, computer reasons can not delete gif pictures, interested friends may copy the code on the computer to see the effect, inside the note has been the low death of the vernacular; Hope not to laugh;
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">body{Background-color: #182327; Margin:0; } </style>varOcanvas=document.queryselector (' Canvas ') varCtx=ocanvas.getcontext (' 2d ') varamount=200;//number of created points varArr=[];//defines an array of data to be moved at each point; varrange=100; varfirst=true; //looping to create moving points for(vari=0;i<amount;i++) {Arr.push ({x:rnd (0, Ocanvas.width), Y:rnd (0, Ocanvas.height), Speedx:rndsign ()*rnd (1,3) *0.5, Speedy:rndsign ()*rnd (1,3) *0.5, R:rnd (1,4)})} setinterval (function(){ //clear the canvas area first, solve the problem of duplicate drawingCtx.clearrect (0,0, Ocanvas.width,ocanvas.height); Arr.foreach (function(dot,index) {//Start Drawing a drawingCtx.beginpath (); Ctx.fillstyle= ' rgb (141,134,32) '; var{x, Y, R, Speedx, SPE EdY}=dot; Ctx.arc (X,y,r,0,2*math.pi,false); Ctx.fill (); Dot.x+=Speedx; Dot.y+=SpeedY; //scope of the restricted point movement if(dot.x<0| | dot.x>ocanvas.width-R) {Dot.speedx*=-1 } if(dot.y<0| | dot.y>ocanvas.height-R) {Dot.speedy*=-1 } }) //Arr.foreach (function(dot,index) { for(Let i=index;i<arr.length;i++){ //find the distance between two points to determine if the connection varDistance =math.sqrt (Math.pow (Dot.x-arr[i].x,2) +Math.pow (Dot.y-arr[i].y,2) ) //determine when to connect if(distance<range) {Ctx.beginpath (); Ctx.moveto (DOT.X,DOT.Y); Ctx.lineto (ARR[I].X,ARR[I].Y); Ctx.strokestyle= ' Rgba (141,134,32,${1-distance/range}) ';Ctx.stroke (); } } }); },16); //when the mouse moves up and then goes.Document.onmousemove=function({Clientx,clienty}) {//Judging the first move up if(first) { first=false; Arr.push ({x:clientx, Y:clienty, Speedx:0, SpeedY:0, R:1 }) }Else{arr[0].x=ClientX; arr[0].y=ClientY; } } //Random function functionRnd (n,m) {returnparseint (Math.random () * (m-n) +N)}//Resolve point Move direction function functionrndsign () {returnMath.random () > 0.5? 1:-1; } </script></body>HTML5CSS3 Learning Summary (4) Canvas drawing
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
