HTML5绘图工具canvas元素实例代码
我们新建一个html文件即可，因为html5的支持来自浏览器，和html文件的版本关系不大，只要浏览器支持HTML5即可。名字：HTML5_canvas.html
效果图：
源代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5_canvas.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//坐标定位
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body onload="loadCanvas();" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>
<div id="xycoordinates"></div>
<script type="text/javascript">
function loadCanvas(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(75,10);
cxt.lineTo(150,50);
cxt.lineTo(0,50);
cxt.lineTo(75,10);
//绘制一个H字样
cxt.moveTo(200,100);
cxt.lineTo(210,100);
cxt.lineTo(210,400);
cxt.lineTo(200,400);
cxt.lineTo(200,100);
cxt.moveTo(210,230);
cxt.lineTo(280,230);
cxt.lineTo(280,240);
cxt.lineTo(210,240);
cxt.moveTo(280,100);
cxt.lineTo(290,100);
cxt.lineTo(290,400);
cxt.lineTo(280,400);
cxt.lineTo(280,100);
//绘制一个5字样
cxt.moveTo(350,100);
cxt.lineTo(500,100);
cxt.lineTo(500,110);
cxt.lineTo(350,110);
cxt.lineTo(350,100);
cxt.moveTo(350,110);
cxt.lineTo(350,240);
cxt.lineTo(360,240);
cxt.lineTo(360,110);
cxt.moveTo(360,230);
cxt.lineTo(500,230);
cxt.lineTo(500,240);
cxt.lineTo(360,240);
cxt.moveTo(500,240);
cxt.lineTo(500,400);
cxt.lineTo(490,400);
cxt.lineTo(490,240);
cxt.moveTo(490,400);
cxt.lineTo(350,400);
cxt.lineTo(350,390);
cxt.lineTo(490,390);
cxt.stroke();
}
</script>
</body>
</html>