整体的内容：
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.οnlοad=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>
<!-- 1,创建Canvas标记 -->
<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>
扫一扫
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
