获取Canvas环境上下文 · canvas基本功能

在定义好 canvas 之后，就可以使用 `javascript` 访问 `canvas` 元素，使用 `canvas` 提供的一系列 `API` 。在使用 `canvas` 时，首先要得到 `canvas` 的环境上下文。才能够对 `canvas` 进行相应操作。 >案例：获取 canvas 的环境上下文 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById("myCanvas"); //step1:获取canvas元素 var ctx = c.getContext("2d"); //step2:内建的HTML5对象 ctx.fillStyle = "#FF0000"; //step3-1:填充红色 ctx.fillRect(0, 0, 150, 75); //step3-2:红色矩形 </script> </body> </html> ``` 程序运行效果如图： ![](https://img.kancloud.cn/20/15/201523dc2c0455574d58b8a51ed80d05_309x146.png)