让我们从
结束标签是必须的。
Oh dear, your browser dosen't support HTML5! Tell you what, why don't you upgrade to a decent browser - you won't regret it! @@##@@
方法来获取,同时得到的还有一些画图用的函数。getContext()
接受一个用于描述其类型的值作为参数。getContext()返回一个CanvasRenderingContext2D对象。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');上面第一行通过 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
}我们会用下面这个最简化的代码模板来(后续的示例需要用到)作为开始。
Canvas tutorial
细心的你会发现我准备了一个名为draw
的函数,它会在页面装载完毕之后执行一次(通过设置body标签的onload属性),它当然也可以在其他事件处理函数中被调用。
以上就是canvas游戏开发学习之一:初识









