以前在论坛里面下载了【大城小胖】共享的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>
分享到:
相关推荐
使用html5的canvas标签+JQuery实现的贪吃蛇小游戏
无限画布无限的html5画布描述提供一个接口,以垂直和水平无限地平移html5画布。 这通过创建无限增长的缓冲画布来工作,当使用.move([x, y])相对移动原点或绝对使用.setOrigin([x, y])相对移动原点时,可以调整画布的...
Simple-HTML5-Drawing-App, 使用 HTML5 Canvas 和JavaScript创建的简单绘图应用程序 使用 HTML5 Canvas 和JavaScript创建图形应用程序文章位于:http://wmalone.com/draw
html5 sonic.js创建canvas画布页面正在加载图标 html5 sonic.js创建canvas画布页面正在加载图标
包含的有:html2canvas.js html2canvas.mini.js,版本号是v1.0.0-alpha.12,。简洁:著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 链接:http://caibaojian.com/html2canvas.html 来源:...
我将尝试通过创建一系列教程来解决此问题,以说明文本编辑器的所有重要方面,同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表: 键盘光标导航和选择; ...
canvas 元素用于在网页上绘制图形。 什么是 Canvas?...创建 Canvas 元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度: <canvas id="myCanvas" width="200" height="100"></canvas>
1 创建本地的web服务,把文件移动到web服务的根目录。 2 访问createfont.html,F12切换到移动端模式。 2.1 【必要】 先点击创建字模,这时画布会出现方格(可以在源码里改变jg变量的大小),点击方格的不同位置创建...
一个react组件,它创建一个带有噪波动画的html canvas。 该组件创建一个画布,并将其传递给以创建动画噪波。 有关该动画的外观,请参见该程序包的。 安装 npm install react-noisy-canvas 用法 import ...
这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ,您可以从中将它们复制到Web服务器提供的文件夹中。 接下来,在HTML标记中包含缩小JavaScript Canvas to Blob脚本: < ...
9种不同的图像和填充纹理图片效果,分别使用html5 svg,html5 canvas和css3背景技术完成,想学习的就来吧!
资源名称:HTML5 Canvas开发详解(第2版)内容简介:随着Canvas的持续升温,Flash的光芒迅速消退。本书是Canvas的畅销图书,它在上一版的基础上,通过讲解如何开发可交互式多媒体应用,引导读者学习HTML5 Canvas。...
一款好看的html5 canvas钢笔绘制线条创建导火线燃烧动画效果,canvas画板钢笔绘制线条动画特效代码。
通过HTML5+Canvas开发详解(第2版),你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更新,其中包含了大量清晰...
Canvas 动画:通过 HTML5 Canvas 元素绘制图形,利用 JavaScript 控制绘制过程,实现高度可定制化的动画效果,适用于需要实时渲染的复杂动画场景。 WebGL 动画:基于 WebGL(Web图形库)的 3D 图形渲染技术,可以...
html5基于sonic.js创建canvas画布正在加载图标样式源码.zip
前端项目-CanvasInput,CanvasInput在HTML5画布中重新创建并改进了完整的DOM元素。
Scrawl-canvas是一个JavaScript库,用于处理HTML5 <canvas>元素。 图书馆: 自动发现网页中现有的<canvas>元素。 可以向网页添加新的<canvas>元素。 定义了一组工厂函数,用于创建可以在画布上绘制的各种图形伪像和...
本教程适合H5 Canvas绘图的初学者阅读,丰富的范例能让读者快速掌握H5 Canvas画布的基本使用方法,能创建简单的动画,能检测捕捉鼠标动作。