标签：
来源：
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>
标签：
原文地址：http://www.cnblogs.com/zff193/p/4205575.html
