Home > Article > Web Front-end > How to draw squares in javascript
How to draw squares in javascript: first create an HTML sample file; then add a canvas tag to the body; then add a script tag to the head for entering javascript code; finally draw the square through the draw method. Can.
The operating environment of this article: windows7 system, javascript1.8.5&&html5 version, Dell G3 computer.
Insert javascript into html to draw a rectangle
<!DOCTYPE <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>canvas元素示例</title> <script> function draw(id) { var canvas = document.getElementById(id); if(canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#eeefff"; context.fillRect(0,0,400,300); context.fillStyle = "green"; context.strokeStyle = "red"; context.lineWidth = 1; context.fillRect(50,50,100,100); context.strokeRect(50,50,100,100); } </script> </head> <body οnlοad="draw('canvas');"> <h1>canvas中画矩形</h1> <canvas id="canvas" width="400" height="300"/> </body> </html>
[Recommended learning: javascript advanced tutorial]
The above is the detailed content of How to draw squares in javascript. For more information, please follow other related articles on the PHP Chinese website!