canvas - 基础知识 - hello canvas

example.html的代码如下：

example.js的代码如下：

最后在浏览器中运行的效果如下：

知识点：

（1）使用document.getElementById()方法来获取指向canvas的引用；

（2）在canvas对象上调用getContext('2d')方法，获取绘图环境变量；

  (3)  使用绘图环境对象在canvas元素上进行绘制。

警告：

在设置canvas的宽度和高度的时候，不能使用px后缀；

虽然支持canvas的浏览器普遍都允许在设定canvas元素的width  与 height属性后使用px后缀，但是，这么做从技术上来说是不被canvas规范接受的。根据规范书，这些属性的取值，只能是非负整数。