The gradient

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial scale=1.0"> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title> </title> </head> <body> <canvas Id ="canvas" width="600" height="800"></canvas> <script> // linear gradient // createLinearGradient(0,0,200,0); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Create a linear gradient. Function drawGradient() {// Start a new drawing path ctx.beginPath(); ctx.translate(50, 50); Var GRD = CTX. CreateLinearGradient (0, 0, 200, 0); CreateRadialGradient (x,y,r,x1,y1, R1) grd.addColorStop(0.5, 'red'); // createRadialGradient(x,y,r,x1,y1, R1) GRD. / / GRD. AddColorStop (0.5, 'green'); / / GRD. AddColorStop (0.8, "red"); grd.addColorStop(1, 'blue'); // Fill gradient ctx.lineWidth = 8; ctx.strokeStyle = grd; ctx.fillStyle = grd; // Draw the circle ctx.arc(100, 100, 50, 0, 360 * math.pi / 180, true) along the center of the 100,100 digits; // path // ctx.stroke(); / / circle CTX. The fill (); } drawGradient(); </script> </body> </html>Copy the code

The grid

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial scale=1.0"> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title> grid </title> </head> <body> <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas> <script> var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); Function drawLine(stepx, stepy) {ctx.lineWidth = 0.5; ctx.strokeStyle = 'green'; Var I = stepx + 0.5; i < canvas.width; i += stepx) { ctx.beginPath(); // A new path ctx.moveto (I, 0); ctx.lineTo(i, canvas.height); ctx.stroke(); } for (var i1 = stepy + 0.5; i1 < canvas.height; i1 += stepy) { ctx.beginPath(); // A new path ctx.moveto (0, i1); ctx.lineTo(canvas.width, i1); ctx.stroke(); } } drawLine(10, 10); } </script> </body> </html>Copy the code

The effect

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title> </title> </head> <body> <canvas Id ="canvas" width="600" height="800" style="border:1px solid red"></canvas> <script> // pan transform var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // ctx.fillStyle = 'green'; / / CTX. FillRect (0,0,50,70); // The original is (top left of canvas) ctx.save(); // Save the original state ctx.translate(50, 50); ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 150, 70); ctx.restore(); // Restore state ctx.save(); // Scale ctx.translate(250, 250); CTX. Scale (1.5, 0.5); ctx.fillStyle = 'green'; ctx.fillRect(0, 0, 50, 70); ctx.restore(); ctx.fillStyle = 'red'; ctx.fillRect(100, 200, 150, 70); </script> </body> </html>Copy the code

Smiling face

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial scale=1.0"> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title> grid </title> </head> <body> <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas> <script> var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // draw tool, // ctx.translate(300,60); ctx.beginPath(); ctx.arc(75, 75, 50, 0, 360 * Math.PI / 180, true); // Draw a circle // true: counterclockwise ctx.moveto (110, 75); ctx.arc(75, 75, 35, 0, 180 * Math.PI / 180, false); // mouth // false // clockwise ctx.moveto (65, 65); ctx.arc(60, 65, 5, 0, 360 * Math.PI / 180, true); // Ctx.moveto (95, 65); ctx.arc(90, 65, 5, 0, 360 * Math.PI / 180, true); // right eye // ctx.moveto (200,330); / / CTX. LineTo (230400); ctx.stroke(); } </script> </body> </html>Copy the code