html5-1 创设canvas-HTML教程-爱易网页

html5-1 创设canvas

日期：2014-05-17　浏览次数：20568 次

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>