example.html的代码如下:
example.js的代码如下:
最后在浏览器中运行的效果如下:
知识点:
(1)使用document.getElementById()方法来获取指向canvas的引用;
(2)在canvas对象上调用getContext('2d')方法,获取绘图环境变量;
(3) 使用绘图环境对象在canvas元素上进行绘制。
警告:
在设置canvas的宽度和高度的时候,不能使用px后缀;
虽然支持canvas的浏览器普遍都允许在设定canvas元素的width 与 height属性后使用px后缀,但是,这么做从技术上来说是不被canvas规范接受的。根据规范书,这些属性的取值,只能是非负整数。