Chapter 5: HTML5 graphics and animation

1. A simple canvas drawing example

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function drawRectangle() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.strokeStyle="#66"; The context. StrokeRect (50,50,100,80); } </script> <fieldset> <legend> </legend> <canvas ID ="myCanvas" width="200px" height="200px" Onclick =" Rectangle()"> Drawing </button> </fieldset> </body> </ HTML >Copy the code

2. Understand canvas coordinate system

The Canvas element constructs a canvas based on a two-dimensional (x,y) network. The origin (0,0) is located in the upper left corner of the canvas. As we go from the origin left to right along the X-axis, we increase in value. We're going from the origin up and down the Y-axis, and we're going to increase.Copy the code

3. Draw lines using moveTo/lineTo

MoveTo (x,y) moves the cursor to the specified coordinate that is used as the starting point for drawing the graph, where x represents the abscissa of the starting point and y represents the ordinate of the starting pointCopy the code
LineTo (x,y) specifies a coordinate as the endpoint of the drawing graphCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function drawLine() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); The context. MoveTo (10, 10); The context. The lineTo (10100); The context. The lineTo (125125); The context. The lineTo (150175); context.stroke(); } </script> <fieldset> <legend> Use moveTo, lineTo to draw a line </legend> <canvas ID ="myCanvas" width="200px" height="200px"> </canvas> <br> <button onclick="drawLine()"> drawing </button> </fieldset> </body> </ HTML >Copy the code

4. Use arc to draw arcs

Arc (x, y, startangle endangle, anticlockwise) - x said arc curve drawing circular arc curve drawing of abscissa - y said the circle arc curve drawing of ordinate - startangle said starting arc -- endAngle indicates the ending arc of a drawing curve --anticlockwise indicates the ending arc of a drawing curveCopy the code
Startangle and EndAngle are both X-axis references and are measured in radians, not degrees. The direct conversion relationship between degrees and radians is: Radians =(math.pi /180)* degreesCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function drawArc() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); The context. The arc (100100,80,0, Math. PI / 180 * 90, false); context.stroke(); } </script> <! -- function drawLine() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); The context. The arc (100100,80,0, (Math. PI * 2, true); context.stroke(); </canvas ID ="myCanvas" width="200px" height="200px"> </canvas> <br> <button The onclick = "drawArc ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

5. Draw bezier curves

A cubic bezier curve can be drawn using the bezierCurveTo method using the quadraticCurveTo methodCopy the code
BezierCurveTo (CP1x, CP1Y, CP2X, CP2Y,x, Y) --cp1x first control point x-coordinate -- CP1y first control point x-coordinate -- CP2X second control point x-coordinate -- CP2Y second control point x-coordinate The x-coordinate of the end of the x-coordinate of the end of the y-coordinate of the end of the Bezier curveCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); for (var i = 100; i < 105; i++) { var x = Math.sin(i)*50; var y = Math.cos(i)*100; context.bezierCurveTo(i/100,i/100,x*x,y*y,x+y,x+y); } context.stroke(); } </script> <fieldset> <legend> Draw arcs with bezierCurveTo </legend> <canvas ID ="myCanvas" width="500px" height="500px"> < canvas > < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

6. Graphic style Settings

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "yellow"; context.strokeStyle= "red"; The context. FillRect (60,60,130,110); // draw a rectangle and fill the middle area with a yellow context. StrokeRect (50,50,150,130); // draw the rectangle and fill the edges with red context.clearrect (70,70,110,90); </script> <fieldset> <legend> Draw a styled rectangle </legend> < Canvas ID ="myCanvas" width="200px" height="200px"> < canvas > < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code
FillStyl: sets the graphic style for the current canvas context. The default is black. StrokeRect (x, Y,width,height) method: Draw a rectangle. Use the current strokeStyle to draw the edges of the rectangle, leaving the middle area unhandled. 4Copy the code

7. Linear gradient

CreatLinearGradient (XStart,ystart, Xend,yend) -- The abscissa of the start point of the xstart gradient -- the abscissa of the start point of the ystart gradient -- the abscissa of the start point of the Xend gradient -- the abscissa of the end point of the yend gradientCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas=document.getElementById("myCanvas"); var context=canvas.getContext("2d"); // When the reateLinearGradient method is called, a LinearGradient object will be created that uses the starting and ending coordinates. //addColorStop(offset,color) //--offset indicates the offset of the color from the start of the gradient. //-- The color used for the gradient Mylinear = context. CreateLinearGradient (0, 0, 150, 50); // Create a linear gradient object myLinear. addColorStop(0,"red"); // Set the first phase color myLinear. addColorStop(0.8,"yellow"); // Set the second stage color myLinear. addColorStop(1,"green"); // Set the third stage color context.fillStyle= myLinear; ,0,250,150 context. FillRect (0); / / draw a rectangle/var/text to add a gradient effect linearText = context. CreateLinearGradient,50,600,50 (300); linearText.addColorStop(0,"yellow"); LinearText. AddColorStop (0.5, "grey"); linearText.addColorStop(1,"red"); context.fillStyle=linearText; context.font="30px Arial"; context.textBaseline="top"; Context. FillText ("HTML5 linear gradient text ",300,50); </script> <fieldset> <legend> linear gradient </legend> < Canvas ID ="myCanvas" width="600px" height="200px"> < canvas > < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >! [](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/718b579e0eae46adb5f7fa0855faad31~tplv-k3u1fbpfcp-watermark.image)Copy the code

8. Radial gradient

CreatRadialGradient (xstart, ystart, radiusStart, xEnd, yEnd, radiusEnd) - xstart gradient abscissa began to circle the center, the start of the round circle ystart gradient ordinate --radiusStart Gradient start circle radius --xEnd gradient end circle center abscissa --yEnd gradient end circle center ordinate --radiusEnd gradient end circle radiusCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas=document.getElementById("myCanvas"); var context=canvas.getContext("2d"); FillColorRadial = context. CreateRadialGradient (150150, 10, 150150200); fillColorRadial.addColorStop(0, "red"); / / set the first phase color fillColorRadial. AddColorStop (0.2, "yellow"); / / set the color in the second stage fillColorRadial. AddColorStop (0.4, "black"); // Set the color context.fillStyle = fillcolordistance; // fill the style context.rect(0,0,300,300); // Draw the rectangle context.fill(); } </script> <fieldset> <legend> linear gradient </legend> <canvas ID ="myCanvas" width="300px" height="300px" The onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

9. Coordinate translation

Translate (x,y) X is the number of unique pixels along the x axis. Y is the number of pixels displaced along the y axisCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); ,0,100,50 context. FillRect (0); // draw the first rectangle context.translate(50,80); // set the coordinate translation context.fillrect (0,0,100,50); </script> <fieldset> <legend> Use Translate to set coordinate translation </legend> <canvas ID ="myCanvas" width="200px" height="200px"> < canvas > < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

10. Coordinate amplification

Scale (x,y) parameter x is the magnification along the X-axis and parameter y is the magnification along the Y-axisCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); ,0,50,50 context. FillRect (0); // Draw the first rectangle context.scale(1.5,2.5); // set the coordinates to zoom in context.fillrect (60,0,50,50); // Draw the second rectangle context.scale(0.5,0.5); // set the coordinates to shrink context.fillrect (280,0,50,50); </script> <fieldset> <legend> </legend> <canvas ID ="myCanvas" width="300px" height="200px"> < canvas > < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

11. Coordinate rotation

Rotate (Angle) The rotate method is used to set the coordinate rotation. When Angle is positive, no graph is rotated in the clockwise directionCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); The context. Translate (150150); for(var i=0; i<5; ,0,100,30 i++) {context. StrokeRect (0); Rotate (math.pi /10); </script> <fieldset> <legend> </legend> <canvas ID ="myCanvas" width="300px" height="300px"> < canvas > < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

11. Graphic combination processing

When we have multiple shapes with overlapping areas on the canvas, due to the order in which they are drawn, If you want to customize the composition of overlapping parts of multiple graphics by modifying the context object's globalCompositeOperation property, you can do thisCopy the code
Source-over: globalCompositeOperation default value, the new drawing will overwrite the overlapping part of the original drawing: copy: The part that does not overlap with the new graph is not displayed. The part that does not overlap with the new graph becomes transparent. The original graph and the drawing graph are displayed, the overlap of the two graphs becomes transparent...Copy the code

12. Graphic shadows

Value: shadowOffsetX: Horizontal distance between shadow and graph. Default value: 0. When the value is greater than 0, the shadow shifts to the right. If the value is greater than 0, the shadow is offset upward. Attribute value: shadowColor shadowColor Attribute value: shadowBlur. The default value is 1Copy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "red"; // set the fill color to red context.fillrect (50,50,100,100); // Draw the rectangle context.shadowOffsetX =6; // Set the shadow level offset context.shadowOffsetY =6; // Set the shadow vertical offset context.shadowColor ="gray"; // Set the shadow color context.shadowBlur=1; </script> <fieldset> <legend> Use image shadow </legend> <canvas ID ="myCanvas" width="200px" height="200px"> < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

13. Draw images

Using the drawImage() method, you can draw an existing <img> element, a <video> element, or an image object created from JS onto the canvasCopy the code
DrawImage (image, dx, dy) image is drawn directly drawImage (image, dx, dy, dw, dh) can map zoom graphics drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh) can draw cutting graphics --image: the image object referenced by the canvas --dx: the abscissa of the top left corner of the image object in the canvas --dy: the ordinate of the top left corner of the image object in the canvas -- Dw: the width of the image object scaled to the canvas -- DH: the height of the image object scaled to the canvas --sx: the abscissa of the part of the image object being drawn --sy: ordinate of the drawn part of the picture object --sw: width of the drawn part of the picture object --sh: height of the drawn part of the picture objectCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw(i) { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src= "li.png"; Image. onload = function() {if(I ==1) context.drawImage(image,0,0); Else if (I = = 2) context. DrawImage (image, 500,0,200,300); The else context. DrawImage (image, 30,30,440,400,700,0,160,180); </script> <fieldset> <legend> </legend> <canvas ID ="myCanvas" width="850px" height="600px"> </canvas> <br> < canvas onclick="draw(1)"> </canvas onclick="draw(2)"> </canvas> <br> < canvas onclick="draw(2)"> </canvas> <br> < canvas onclick="draw(1)" "Onclick =" the draw (3) cutting figure > < / button > < fieldset > < / body > < / HTML >Copy the code

14. Image tiling

CreatePattern (image,type) where image indicates the image object to be tiled, and type indicates the image tiling mode. There are four types of type: no-repeat --repeat-x --repeat-y --repeatCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> function draw(i) { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src= "li.png"; image.onload = function() { if(i==1) context.fillStyle=context.createPattern(image,"repeat-x"); Else if(I ==2) context.fillstyle = context.createpattern (image,"repeat-y"); Else Context.fillstyle = context.createpattern (image,"repeat"); / / set the omnidirectional tile context. FillRect (0, 0, canvas width, canvas. Height); </script> <fieldset> <legend> Image tile </legend> <canvas ID ="myCanvas" width="800px" height="500px"> <button onclick="draw(1)"> </button onclick="draw(2)"> </button onclick="draw(3)">  </fieldset> </body> </html>Copy the code

15. Image cropping

The Clip method is used to draw the clipping area on the canvas in the path mode before the clipping call. Then, the clip method can be used to clipping the specified areaCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script type="text/JavaScript"> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src="li.png"; Image.onload = function() {// Draw a heart-shaped border for clipping the object context.translate(250,120); var r=0 , a=100 , start = 0 , end= 0; context.rotate(Math.PI); for(var q=0; q<500; q++){ start += Math.PI * 2 /500; end = start + Math.PI * 2 /500; r=a * (1-Math.sin(start))+60; Context. arc(0,0,r,start,end,false); } context.stroke(); context.clip(); // call clip to clip context.drawImage(image,0,0); </script> <fieldset> <legend> </legend> < Canvas ID ="myCanvas" width="600px" height="400px"> <button onclick="draw()"> </button> </field > </body> </ HTML >Copy the code

16. Pixel processing

1. GetImageData is used to obtain the pixels in the specified areaCopy the code
2. PutImageData is used to redraw the processed pixels in the specified areaCopy the code

17. Draw text

FillText (content,dx,dy[, maxLength]) is used to draw text in the way of filling on the canvas. Represents the maximum length of the drawn textCopy the code
StrokeText (content,dx,dy[, maxLength]) is used to draw text as a stroke on the canvasCopy the code
Text-align Text alignment textBaseline Specifies the text position relative to the starting point. The value can be top, bottom, or middleCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); 40 px drawText (context, "bold impact", 20, 50, "stroke"); DrawText (context, "bold sans ms 40 px", 50100, "fill"); } function drawText(context,font,x,y,fillType) { context.font = font; context.textAlign = "left"; context.textBaseline = "top"; If (fillType == "fill") {context.fillText("HTML5 draw text ",x,y)} else {context.strokeText("HTML5 draw text ",x,y); </script> <fieldset> <legend> </legend> <canvas ID ="myCanvas" width="400px" height="200px"> <button onclick="draw()"> Drawing </button> </fieldset> </body> </ HTML >Copy the code

18. Save and restore the graph

The save and Restore methods do not require any parameters and are simply called using the canvas context objectCopy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> var i=0; function draw() { i++; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); The context. The clearRect,0,400,200 (0); // Empty the specified area if (I ==1) // Draw a red fill rectangle area {context.fillstyle ="red"; The context. FillRect,10,100,50 (10); } else if (I ==2) // Draw a yellow fill rectangle {context.fillStyle="yellow"; The context. FillRect (30,40,100,50); } else {context. FillRect (50,70,100,50); }} function save() {var canvas = document.getelementById ("myCanvas"); var context = canvas.getContext("2d"); context.save(); } function restore() {var canvas = document.getelementById ("myCanvas"); var context = canvas.getContext("2d"); context.restore(); } </script> <fieldset> <legend> <canvas ID ="myCanvas" width="400px" height="200px"> </canvas> <br> <button </button onclick="save()"> Save </button> </button onclick="restore()"> Restore </button> </fieldset> </body> </html>Copy the code

19. Make animations

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script> var x=0,y=0; Function move() {var canvas = document.getelementById ("myCanvas"); var context = canvas.getContext("2d"); The context. The clearRect,0,400,200 (0); if (x<400) { x++; } if (y<200) { y++; } context. FillRect (x, y, 50, 50); } function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "red"; ,0,50,50 context. FillRect (0); setInterval(move,200); </script> <fieldset> <legend> simple animation </legend> <canvas ID ="myCanvas" width="400px" height="200px"> < canvas > < br > < button onclick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code

20. Case: Drawing a clock

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional. DTD ">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script type="text/JavaScript"> var slen = 70; Var mlen = 65; Var hlen = 45; Var ls = 0; var lm = 0; var lh = 0; function draw() { var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.beginPath(); cxt.arc(200, 150, 4, 0, 2 * Math.PI, true); // Draw the dial center cxt.fill(); cxt.closePath(); cxt.beginPath(); cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); // Draw the dial's periphery cxt.stroke(); cxt.closePath(); cxt.beginPath(); cxt.translate(200, 150); Rotate (-math.pi / 2); rotate(-math.pi / 2); cxt.save(); for (var i = 0; i < 60; I++) / / draw a rectangle scale line {the if (I % 5 = = 0) {CXT. FillRect (80, 0, 20, 5); } else { cxt.fillRect(90, 0, 10, 2); } cxt.rotate(Math.PI / 30); } cxt.closepath ();} cxt.closepath (); setInterval("Refresh();" , 1000); } function refresh () {var c = document.getelementById ("myCanvas"); var cxt = c.getContext("2d"); cxt.restore(); cxt.save(); cxt.rotate(ls * Math.PI / 30); cxt.clearRect(5, -1, slen+1, 4); // Clear the last display of the second hand cxt.restore(); cxt.save(); cxt.rotate(lm * Math.PI / 30); cxt.clearRect(5, -1, mlen+1, 5); // Clear the last display of the minute hand cxt.restore(); cxt.save(); cxt.rotate(lh * Math.PI / 6); cxt.clearRect(5, -3, hlen+1, 6); Var time = new Date(); var s = ls=time.getSeconds(); Var m= lm= time.getminutes (); // Get the current time (min) var h= lh= time.gethours (); // Get the current time (hour) cxt.restore(); cxt.save(); cxt.rotate(s * Math.PI / 30); // Set the minute hand position cxt.fillrect (5, 0, slen, 2) according to the current number of seconds; // Redraw the second hand cxt.restore(); cxt.save(); cxt.rotate(m * Math.PI / 30); // Set the minute hand position cxt.fillrect (5, 0, mlen, 3) according to the current minute number; // Redraw the minute hand cxt.restore(); cxt.save(); cxt.rotate(h * Math.PI / 6); // Set the minute hand position cxt.fillRect(5, -2, hlen, 4) according to the current clock number; </script> <body> <fieldset> <legend> <canvas ID ="myCanvas" width="400" height="300"></canvas> < br > < button onClick = "the draw ()" > drawing < / button > < fieldset > < / body > < / HTML >Copy the code