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;
    }
}


以上.