您的位置：首页 > Web前端 > HTML5

web前端---html5

2015-09-11 13:55 615 查看

整体的内容：

1，html5的概念：

2，html5的新标记：

-------------------------------------------
3，html5的新标记：

4，html的表单：

简单的例子：

------表单的验证：

5，Canvas画图：

----例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas的第一个例子</title>
<script type="text/javascript">
window.onload=function(){
// 为了防止有的浏览器不支持，添加了try--catch

try{
// 2,获取canvas对象
var myCanvas=document.getElementById('myCanvas');
// 3,获取上下文
var context=myCanvas.getContext("2d");
// 4，开始画图
context.beginPath();
context.moveTo(0,0);
context.lineTo(70,70);
context.stroke();
}catch{
alert("该浏览器不支持");
}

}
</script>
</head>

<body>

<canvas id="myCanvas" width="100" height="100" style="border:1px solid red"> </canvas>
</body>
</html>
-------------------------
画一个三角形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画三角形</title>
<script type="text/javascript">
// 画三角形
window.onload =function(){
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext("2d");

context.beginPath();
context.moveTo(100,0);
context.lineTo(0,.100);
context.lineTo(100,100);
context.lineTo(100,0);
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid red"></canvas>
</body>
</html>

-----------------------------------------------
画一个三角形并填充颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画一个三角形并填充颜色</title>
<script type="text/javascript">
// 画三角形
window.onload =function(){
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext("2d");

context.beginPath();
context.moveTo(100,0);
context.lineTo(0,.100);
context.lineTo(100,100);
context.lineTo(100,0);
context.fillStyle='#fba';
context.fill();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid red"></canvas>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航