h5_h5邀请函怎样画一条竖线-CSDN博客

本文链接：https://blog.csdn.net/zctyhj/article/details/50463926

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 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 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 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 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 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 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、清除矩形区域