<br> // If you want to draw on Cavnas, you need to use JavaScript <br> // 2 . Get the drawing tool: We can get a drawing object (context object) from the canvas tag, <br> // Various drawing methods and settings are placed on this object. <br> var cvs = document.getElementById('cvs') ; <br> var ctx = cvs.getContext('2d'); // Get the canvas2d drawing tool <br> // 3. Draw the path. <br> ctx.moveTo(50,50); // Move the "pen" to a certain position in the image <br> ctx.lineTo(150,50); // Use the "pen" to connect a line to a certain point <br> ctx. lineTo(150,150); <br> ctx.lineTo(50,150); <br> ctx.lineTo(50,50); <br> // There is nothing on our canvas now, why? Because moveTo and lineTo are used to draw paths. <br> // A path is a "draft" used to describe the shape or line we want to draw <br> // 4. Fill or stroke the path.或者 // Before the drawing or filling, we can set the color of the drawing or filling. S // Canvas is a mechanism that "the browser is regardless of him after painting", <br> // So we want to set the drawing or filling style, we must be before the drawing or filling. After filling, setting the style will not work <br><br> ctx.strokeStyle = 'lightgreen'; // Set the stroke color to green <br> ctx.lineWidth = 25; // Set the stroke line width <br> ctx.stroke (); // Stroke <br><br> ctx.fillStyle = 'pink'; <br> ctx.fill(); // Fill <br></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
