h5

HTML5 参考手册
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML5 标签手册
HTML 5 中的新特性包括了嵌入音频、视频和图形的功能,客户端数据存储,以及交互式文档。HTML 5 还包含了新的元素,如:nav, header, footer 以及 figure 等。HTML 5 改进了互操作性,并减少了开发成本。


HTML5 标准属性
HTML 5 中标签所支持的新的属性


HTML5 事件
HTML 5 元素中定义事件行为的标准事件属性主要包括:Window 事件,form事件 ,keybord 事件 , mouse 事件 ,meda 事件。


HTML5 音频视频
HTML5 DOM 为 audio 和 video 元素提供了方法、属性和事件。允许您使用 JavaScript 来操作 audio 和 video 元素。


HTML5 画布参考
canvas 标签只是图形的容器,必须使用脚本 javascript 来完成实际的绘图任务。本文介绍完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等。


HTML5 DTD
不同的文档类型声明 DTD ,会支持不同的标签列表,本文列出了 HTML5/HTML 4.01/XHTML 标签,以及它们会对应的文档类型 DTD 。






html5 canvas 标签学习
1、画横线
<body>
    <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签。
    </canvas>
    <script type="text/javascript">
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    if (canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");


        //开始一个新的绘制路径
        ctx.beginPath();
        //设置弧线的颜色为蓝色
        ctx.strokeStyle = "blue";
        ctx.moveTo(100, 100);
        ctx.lineTo(300, 100);


        //按照指定的路径绘制弧线
        ctx.stroke();
    }
    </script>
</body>
2、画竖线
<body>
    <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签。
    </canvas>
    <script type="text/javascript">
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    if (canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");


        //开始一个新的绘制路径
        ctx.beginPath();
        //设置弧线的颜色为蓝色
        ctx.strokeStyle = "blue";
        ctx.moveTo(100, 100);
        ctx.lineTo(100, 300);


        //按照指定的路径绘制弧线
        ctx.stroke();
    }
    </script>
</body>
3、画点
<body>
    <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签。
    </canvas>
    <script type="text/javascript">
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    if (canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");


        //开始一个新的绘制路径
        ctx.beginPath();
        //设置弧线的颜色为蓝色
        ctx.strokeStyle = "blue";
        ctx.moveTo(100, 100);
        ctx.lineTo(100, 101);


        //按照指定的路径绘制弧线
        ctx.stroke();
    }
    </script>
</body>
4、画三角形
<body>
    <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签。
    </canvas>
    <script type="text/javascript">
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    if (canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");


        //开始一个新的绘制路径
        ctx.beginPath();
        //设置弧线的颜色为蓝色
        ctx.strokeStyle = "blue";


        ctx.moveTo(100, 100); //第一个起点
        ctx.lineTo(100, 200); //第二个点
        ctx.lineTo(220, 60); //第三个点(以第二个点为起点)
        ctx.lineTo(100, 100);
        
        //按照指定的路径绘制弧线
        ctx.stroke();
    }
    </script>
</body>
5、画正方形
<body>
    <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签。
    </canvas>
    <script type="text/javascript">
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    if (canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");


        //开始一个新的绘制路径
        ctx.beginPath();
        
        //设置矩形的颜色为蓝色
        ctx.fillStyle = "blue";
        ctx.fillRect(30,30,340,240);


        //按照指定的路径绘制弧线
        ctx.stroke();
    }
    </script>
</body>
<body>
    <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签。
    </canvas>
    <script type="text/javascript">
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    if (canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");


        //开始一个新的绘制路径
        ctx.beginPath();


        ctx.strokeStyle = 'red';
        ctx.strokeRect(30, 30, 340, 240);


        //按照指定的路径绘制弧线
        ctx.stroke();
    }
    </script>
</body>
6、画圆


7、给正方形上色


8、让正方形旋转


9、画曲线


10、图形平移


11、对称翻转


12、两个图形覆盖


13、图像裁剪


14、制作动画


15、绘制文字


16、绘制表格


17、清除矩形区域

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值