大二学生课堂笔记

上课笔记

动画
1.animation: 选择器的关键名称 动画时间 运动曲线 开始的时间 播放次数 是否反复播放 是否运用最后一帧动画的样式 是否暂停或播放
2.animation-name 指定要绑定到选择器的关键帧的名称
3.animation-duration 动画指定需要多少秒或毫秒完成
4. animation-timing-function 设置动画将如何完成一个周期
5. animation-delay 设置动画在启动前的延迟间隔。
6. animation-iteration-count 定义动画的播放次数。
7. animation-direction 指定是否应该轮流反向播放动画。
8. animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
9. animation-play-state 指定动画是否正在运行或已暂停。

五种常见图形

五角星

在这里插入代码片<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");       
        cxt.lineTo(5,69);
        cxt.lineTo(195,69);
        cxt.lineTo(41,181);
        cxt.lineTo(100,0);
        cxt.lineTo(159,181);
        cxt.lineTo(5,69);
        cxt.stroke();
</script>

三角形

<canvas id="SanJiao" width="500" height="500" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("SanJiao");
    var cxt=c.getContext("2d");
        cxt.lineTo(100,0);
        cxt.lineTo(0,173);
        cxt.lineTo(200,173);
        cxt.lineTo(100,0);
        cxt.stroke();
</script>        

圆形

<canvas id="SanJiao" width="500" height="500" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
        cxt.beginPath();
        cxt.arc(200,60,40,0,2*Math.PI);
        cxt.stroke();
</script>

圆柱

<canvas id="myYuanZhu" width="500" height="500" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myYuanZhu");
    var ctx=canvas.getContext('2d');
        ctx.ellipse(200,100,100,50,0,0,Math.PI*2);
        ctx.fill();
        ctx.stroke();
        ctx.moveTo(100,100);
        ctx.lineTo(100,400);
        ctx.moveTo(300,100);
        ctx.lineTo(300,400);
        ctx.stroke();
        ctx.closePath()
        ctx.beginPath();
		ctx.ellipse(200,400,100,50,0,0,Math.PI*2);
        ctx.fill();
        ctx.stroke();
</script>

正方体

<canvas id="myZhengFangTi" width="500" height="500" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myZhengFangTi");
    var cxt=c.getContext("2d");
        cxt.moveTo(100,10);
        cxt.lineTo(250,10);
        cxt.moveTo(100,10);
        cxt.lineTo(50,60);
        cxt.moveTo(250,10);
        cxt.lineTo(200,60);
        cxt.moveTo(50,60);
        cxt.lineTo(200,60);
        cxt.moveTo(50,60);
        cxt.lineTo(50,190);
        cxt.moveTo(200,60);
        cxt.lineTo(200,190);
        cxt.moveTo(250,10);
        cxt.lineTo(250,140);
        cxt.moveTo(250,140);
        cxt.lineTo(200,190);
        cxt.moveTo(200,190);
        cxt.lineTo(50,190);
        cxt.moveTo(50,190);
        cxt.lineTo(100,140);
        cxt.moveTo(100,140);
        cxt.lineTo(250,140);
        cxt.moveTo(100,140);
        cxt.lineTo(100,10);
        cxt.stroke();
</script>