html5

标签：

　　这周学习了html5，这又是一个全新的知识。

　　html5简单来说就是w3c最新版的一个关于html新标准,html5标准综合来说新增加了下面的重要的标准

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search 

　　html5对我来说，感觉最直接的一点就是对实际项目操作又更接近了一步，比如header、nav、footer应用，对section应用，还有新的表单元素date、time应用，最重要一点革新就是对画布canvas应用，有了canvas，我们可以直接在js上面操作矩形、圆、线性等应用，还有等同的属性如填充、放大、缩小等等。

　　然而利用的最多还是html5和css3的一起应用所产生的动画效果是相当duang~~~的，可以有效的摆脱flash，可以在不用学习一个新的技术同时，用我们熟练的js技术去对生产出动画效果，现在的去趋势就是很多利用html5和css3做出很多很炫的动画效果，有兴趣的朋友可以在网上搜一搜。

　　这周我们利用canvas画布，大量练习了画图的效果，也利用css3和html5做了一些登陆画面的动画效果，虽然比较简单，但我相信在不救将来，我们也会做出非常duang~和酷炫的动画效果出来，下面付上一段自己画的安卓经典的机器人代码：

<canvas id="canvas" width="500" height="500">
</canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    showhead();
    showEyes();
    showtianxians();
    showCenter();
    showHands();
    showFoot();
//    头部
    function showhead(){
        context.fillStyle="limegreen";
        context.beginPath();
        context.arc(250,150,100,0,1*Math.PI,true);
        context.closePath();
        context.fill();
    }
//    眼睛
    function showEyes(){
        context.fillStyle="black";
        context.beginPath();
        context.arc(220,100,11,0,2*Math.PI);
        context.arc(280,100,11,0,2*Math.PI);
        context.closePath();
        context.fill();
    }
//    天线
        function showtianxians(){
            context.fillStyle="blue";
            context.beginPath();
            context.moveTo(180,40);
            context.lineTo(200,70);
            context.lineTo(205,70);
            context.lineTo(185,40);
            context.closePath();
            context.fill();
    }
//        身子
        function showCenter(){
            context.fillStyle="limegreen";
            context.beginPath();
            context.fillRect(150,170,200,175);
            context.closePath();
            context.fill();
//圆弧左
            context.fillStyle="limegreen";
            context.beginPath();
            context.moveTo(170,345);
            context.arc(170,345,20,0.5*Math.PI,1*Math.PI);
            context.closePath();
            context.fill();
//圆弧右
            context.fillStyle="limegreen";
            context.beginPath();
            context.moveTo(330,345);
            context.arc(330,345,20,0,0.5*Math.PI);
            context.closePath();
            context.fill();
//圆弧中间矩形
            context.fillStyle="limegreen";
            context.beginPath();
            context.moveTo(170,365);
            context.lineTo(330,365);
            context.lineTo(330,345);
            context.lineTo(170,345);
            context.closePath();
            context.fill();
        }

//手
        function showHands(){
            context.fillStyle="limegreen";
            context.beginPath();
            context.fillRect(90,185,40,100);
            context.fillRect(370,185,40,100);
            context.arc(110,185,20,0,1*Math.PI,true);
            context.arc(390,185,20,0,1*Math.PI,true);
            context.closePath();
            context.fill();
//下面的圆弧
            context.fillStyle="limegreen";
            context.beginPath();
            context.arc(110,285,20,0,1*Math.PI,false);
            context.arc(390,285,20,0,1*Math.PI,false);
            context.closePath();
            context.fill();
        }
//脚
        function showFoot(){
            context.fillStyle="limegreen";
            context.beginPath();
            context.fillRect(180, 365,40,70);
            context.fillRect(280, 365,40,70);
            context.arc(200,435,20,0,1*Math.PI,false);
            context.arc(300,435,20,0,1*Math.PI,false);
            context.closePath();
            context.fill();
        }

html5

标签：

原文地址：http://www.cnblogs.com/gong-ping/p/4641732.html