3.获得画笔：通过canvas对象的getContext("2d")方法，获得2D环境
对应的代码也就是三句话：
- <canvas id=“canvas”></canvas> var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
完整代码如下。
- <!doctype html> <html lang="zh">
- <head> <meta charset="UTF-8">
- <title>基础的Canvas</title> </head>
- <body>
- <div id="canvas-warp"> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">
- 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas>
- </div>
- <script> window.onload = function(){
- var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");
- } </script>
- </body>
- </html>
注意几点：
1.JavaScript代码需要包裹在<script>标签中。
2.window.onload = function(){}加载页面后就要立即执行，表示网页加载完执行后面的那个function函数体的内容。
至此，画布和画笔已经准备完毕，接下来就让我们使用画笔(context对象)绘制出高逼格的图像吧！觉醒吧！艺术家之魂！
