HTML基础知识

Cavas 40min

<cavas id="cavas" width="800px" height="600px"></cavas>
<script></script>

画点线：
moveTo() 起点
lineTo() 下一点
stroke() //添加线条
lineWidth //线宽
strokeStyle //线的颜色
fillStyle //填充颜色
beginpath //重新绘制
任意画：
e.clientX 鼠标的坐标点
onmousedown //按下
onmouseup //离开
onmousemove //移入

画矩形：
fillRect //填充矩形
strokeRect //空心矩形
clearRect() //清除矩形区域

画圆：
arc(x,y,半径，起始角度)

画渐变色：
createLinearGradient(x0,y0,x1,y1) //开始的x轴，开始的y轴，结束点的x轴，结束点的y轴
addColorStop() 0-1,颜色

文字：
font = “大小，样式，”
fillText（文字，位置，最大宽度）实心字
strokeText() 空心字
shadowColor = " "
shadowOffsetX =
shadowOffsetY
shadowBlur //阴影模糊

cavas小游戏

业务逻辑：
开始 人物移动
暂停 停止
坐标点
开始（0，0）
结束（300，350）

var arr = [{x:0,y:0},{x:300,y:350}];
var c = document.getElementById('myCavas');
c.getContext('2d');

drawImage//绘制图片

1 怎么把图片加载进来的？
图片预加载？如何预加载？
图片预加载说白了就是将所有所需的图片提前请求加载到本地
图片预加载？ 图片加载完再执行
var img = new Image();
img.src=“图片地址”;
img.onload = function(){
}

2 怎么让小人移动的？
定时器，坐标点加 速度

3 按住开始速度加速怎么办？
加flag

4 怎么添加行驶轨迹？
人物添加进来后为什么后面那么乱？
因为cavas每走一次就加载一次。

cavas英雄通关

分析：
图片：
背景，怪兽，英雄
事件：键盘按下 英雄移动
英雄默认值
var hero = {x:0,y:0,speed:1}
怪兽的默认值 随机
渲染图片 文字
英雄和怪兽的位置重合

鼠标事件，
事件监听
键盘按下：keydown
e.keyCode

游戏初始化
动画神器？
requestAnimationFrame()
webkit？
思路：
图片预加载–>设置默认值—>设置事件—>渲染图片–>初始化

websocket

轮询：隔几秒就发送一个对应的请求。
网络通信协议
实现方式？

#连接服务器
var ws = new WebSocket("ws://139.196.42.209:8090");
#连接成功触发
ws.onopen = function() {
	alert('连接成功');
};
ws.onerror = function() {
	alert('连接失败')
};
//接收消息时触发
ws.onmessage = function(MessageEvent) { //返回的数据
		console.log(MessageEvent)
}
// 发送数据
input.onkeydown = function(){
ws.send(this.value);
}

实时的图表展示

配置项，响应式处理，初始化，渲染数据

添加定时器–>

聊天室

描述
先写–>再封装

websockt步骤+一些细节
innerHTML+li+ul +if条件判断

function show(obj) {
	
}

百度地图调用及定位

HTML5新特性

web本地存储
sessionStorage(临时存储)
localStorage（长期存储）

1 存储 （两种方式）
window.localStorage.setItem(‘name’,‘张三’)
localStorage.age = 18;

获取
window.localStorage.getItem(‘name’)

2 删除
localStorage.removeItem()

3 获取长度
localStorage.length

4 清除全部

留言板

1 提交信息，拿到留言信息
2 列表展示 for循环 forEach

文件上传

type = “file”

upload.onclick = function() {
	//	浏览器是否支持 HTML5
	
	if()
}