html5-1 创建canvas
以前在论坛里面下载了【大城小胖】共享的html5游戏源码。
现在打算一点一点用心的学习下。
顺便在共享下全部源码。
正题。
<html><script type="text/javascript">function init(){// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）var canvas=document.createElement("canvas");canvas.width=600;canvas.height=400;document.body.appendChild(canvas);// 取得2d绘图上下文 var context= canvas.getContext("2d");// 加载图片,加载后在context上进行绘制. (图片是异步加载,所以在onload事件里进行绘制)var image = new Image();image.src = "../res/bg.png";image.onload=function(event){var loadedImg=event.target;// 将加载后的图片,绘制在画布坐标[dx,dy]处,也就是图片的左上角坐标为[dx,dy]var dx=0, dy=0 ;context.drawImage(loadedImg,dx,dy);};}</script></head><body onload="init()"></body></html>