来源：
http://www.w3school.com.cn/html5/index.asp
----------------------------
----------------------------------------------
画布
绘制填充矩形
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas> //canvas元素
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //获取canvas元素
var cxt=c.getContext("2d"); //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.
cxt.fillStyle="#FF0000"; //fillStyle 方法将其染成红色
cxt.fillRect(0,0,150,75); //fillRect 方法规定了形状、位置和尺寸. 0,0 坐上坐标 150,75右下坐标（相对坐标）
</script>
</body>
</html>
线条
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //绘制线条的起始位置（10,10） 相对于canvas框内的左上位置为初始位置（0,0）
cxt.lineTo(150,50); //绘制线条到坐标点150,50 相对于canvas起始位置 x坐标150 y坐标50
cxt.lineTo(10,50); //绘制线条到坐标点10,50 相对于canvas起始位置 x坐标10 y坐标50
cxt.stroke(); //执行绘制线条
</script>
圆形
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
渐变
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
图像
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
获取坐标位置 无html5元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<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 style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>
时间： 2024-11-06 09:24:57