canvas游戏开发学习之四：应用图像(4)_H5之家 - 中国HTML5教程资源分享第一站

上面第一行通过 getElementById方法取得 canvas 对象的 DOM 节点。然后通过其getContext
方法取得其画图操作上下文。

除了在那些不支持的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单，判断getContext
是否存在即可。var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }

我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始。

<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="myCanvas" width="150" height="150"></canvas> </body> </html>

细心的你会发现我准备了一个名为draw
的函数，它会在页面装载完毕之后执行一次（通过设置body标签的onload属性），它当然也可以在其他事件处理函数中被调用。

以上就是canvas游戏开发学习之一：初识<canvas>标签的内容，更多相关内容请关注PHP中文网（）！