h5
2016-01-05 17:11
465 查看
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、清除矩形区域
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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、清除矩形区域
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTM4和HTML5的区别
- 7 款华丽的 HTML5 Loading 动画特效
- 浅析HTML5 Web Workers使用场景与作用
- 关于 HTML5 的文件上传处理，兼容，以及 BLOB 对象的使用
- H5实现拍照并上传
- 传奇创世孙大宁：2016年H5将井喷，新传播途径是突破口
- html5+d3 svg 线条、图形颜色渐变动画
- HTML5 Canvas图像放大、移动实例1
- Html5添加Canvas的EAN13条形码生成插件教程
- 8个超炫酷仿苹果应用的HTML5动画
- HTML5 Canvas图片操作简单实例1
- HTML5 Canvas前台压缩图片并上传到服务器
- HTML5 Canvas显示本地图片实例1
- 后盾网html5视频教程全集观看下载
- html5图片懒加载
- H5将彩色照片转换成黑白照片
- Html5添加图片分类过滤特效插件教程
- Html5添加移动触摸设备的在线签名和涂鸦插件教程
- HTML5的学习（一）HTML5标签
- HTML5 标准格式