【HTML5移动开发学习笔记】的更多相关文章

HTML5移动开发学习笔记之Canvas基础

1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> canvas { border-width: 5px; border-style: dashed; b…

【整理】HTML5游戏开发学习笔记（5）- 猜谜游戏

距上次学习笔记已有一个多月过去了,期间由于新项目赶进度,以致该学习计划给打断,十分惭愧.书本中的第六章的例子相对比较简单.所以很快就完成. 1.预备知识html5中video标签的熟悉 2.实现思路对20组G20成员进行国家名和其首都的匹配的游戏.通过2组div来显示,监听其点击事件click,通过元素的id保存国家和首都的索引,通过前后2次的点击来判断其2次点击的索引是否相等,相等则匹配成功,不相等则继续.全部匹配成功后则自动播放视频. 3.主要代码 var membersForG20 = […

【整理】HTML5游戏开发学习笔记（1）- 骰子游戏

<HTML5游戏开发>,该书出版于2011年,似乎有些老,可对于我这样没有开发过游戏的人来说,却比较有吸引力,选择自己感兴趣的方向来学习html5,css3,相信会事半功倍.不过值得注意的是,该书的游戏是些小的游戏,内容相对比较基础,而且html5标准已经正式发布,可能会和书中所描述有少许出处.当然了,书中的小游戏还是比较不错的,适合我这样的前端开发不咋地的来练手,学习方式是在以自己的思路实现之后,再来看书中的实现思路,因为每个人有自己的开发习惯. 1.预备知识在做第一个骰子游戏开发前,必须知…

HTML5移动开发学习笔记之CSS3基础学习

CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现的效果是: 2.CSS定位与浮动 1)定位: 属性 描述  position 把元素放到一个静态的(static:元素框正常生成),相对的(relative:元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置]),绝对的(absolute:元素框从…

HTML5移动开发学习笔记

最近做webapp项目过程中,发现坑还是挺多的,以下是网络收集一些开发中的常见问题及知识汇总,以便查阅,慢慢更新:). meta 基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数…

【整理】HTML5游戏开发学习笔记（2）- 弹跳球

1.预备知识(1)在画布上绘制外部图片资源(2)梯度(gradient):HTML5中的对象类型,包括线性梯度和径向梯度.如createLinearGradient,绘制梯度需要颜色组http://www.w3school.com.cn/tags/canvas_createlineargradient.asp function test1(){ //在画布上绘制外部图片资源 var ctx = document.getElementById('ballCanvas').getContext('2…

【整理】HTML5游戏开发学习笔记（4）- 记忆力游戏

1.预备知识(1)Canvas绘制多边形(2)Canvas绘制文字 2.实现思路涉及的对象  (1)场景Scene  场景代表了画布上的一块区域,场景里的每个物体都是场景里的一个元素,其绘制统一由场景来调用绘制 (2) 扑克牌Card  包括翻开,关闭,移除等操作 (3)一副扑克牌Deck  包括洗牌 (4)游戏玩法PlayingRule 每次选择2张扑克进行比较,相等则消除(移除),不相等,则进行下一次的2张牌的选择 ,在进行比较 3.主要代码 /*场景*/ function Scene(ca…

【整理】HTML5游戏开发学习笔记（3）- 抛物线运动

1.预备知识(1)Canvas旋转的实现过程 window.onload = function(){ var ctx = document.getElementById('canvas1').getContext('2d') //旋转 ctx.save() ctx.translate(200,200)//把(200,200)点作为临时的(0,0)点 ctx.rotate(30*Math.PI/180)//顺时针旋转30度所对应的弧度 ctx.fillRect(0,0,100,150) ctx.r…

【前端】移动端Web开发学习笔记【2】 & flex布局

上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> Flex弹性盒模型 来源:慕课网 源HTML文件(备份下载):web_flex…

【前端】移动端Web开发学习笔记【1】

下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了一些基本概念. Part 2: PC端的一些基本概念 screen.width/height 意义:用户屏幕的整体大小. 度量单位:设备像素. 浏览器错误:IE8以CSS像素对其进行度量,IE7和IE8模式下都有这个问题. 它们是显示器的属性,而不是浏览器的. window.pageX/YOffse…