html5-1 创设canvas
日期：2014-05-17 浏览次数：20700 次
html5-1 创建canvas
以前在论坛里面下载了【大城小胖】共享的html5游戏源码。
现在打算一点一点用心的学习下。
顺便在共享下全部源码。
正题。
以前在论坛里面下载了【大城小胖】共享的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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
