0x02

Summer Training Day 3.

canvas.
Flex.
IFE Task 10

1.Canvas.

在html创建canvas标签

1
<canvas width:"600";height:"600"; id="canvas"></canvas>

js操作.

1
2
var canvas = document.getElementById("canvas");//获取canvas.
var cxt = canvas.getContext("2d");//上下文.里面有很多绘画方法.

1
2
3
4
cxt.fillStyle = 'rgba';
cxt.strokeStyle = 'rgba';
cxt.fillRect(x,y,width,height);//填充,以像素计.
cxt.strokeRect(x,y,width,height);//描边

画圆.

1
2
3
4
5
cxt.beginPath();
cxt.arc(x,y,r,始角度,末角度,boolean);//true为顺时针,false逆时针.
cxt.closePath();
cxt.fillStyle = 'rgba';
cxt.fill();//填充

线条.

1
2
3
4
5
cxt.beginPath();
cxt.moveTo(x,y);
cxt.lineTo(x,y);
cxt.closePath();
cxt.stroke();

清除.

1
cxt.clearRect(x,y,width,height);//清空矩形区域.

2.Flex 布局

阮一峰的日志

1
2
3
4
5
6
7
8
9
body {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> || <flex-wrap>;/*前两者之和*/
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content/*多根轴线,若只有一则不起作用*/;
}

H5新特性之LocalStorage.

可用于储存客户端临时信息.
localStorage储存的数据无时间限制.
与之对应的SessionStorage储存的数据当用户关闭窗口时候清空.

IFE Task.

Task 10

Flex 布局 + @media媒体查询.

1
2
3
4
5
6
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media screen and (min-width:640px) {
body {
justify-content: space-between;
align-items: center;
}
}
@media screen and (max-width:640px){
body {
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#four {
order: -1;
}
}


以上.