1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 创建一个宽300px, 高300px的画布环境 --> <canvas id="c1" width="300" height="300"></canvas> </body> </html>
2. 我们需要控制这个画布, 在画布里面绘制图形, 这时就需要通过js控制:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="c1" width="300" height="300"></canvas> <script> var canvas = document.getElementById("c1"); var ctx = canvas.getContext("2d"); ctx instanceof CanvasRenderingContext2D; // true </script> </body> </html>
完成了上面两步以后就可以认为是初始化了一个画布(canvas)环境.