标签：des style blog java color 使用 os io
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
1 <canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
1 <script type="text/javascript"> 2 var c=document.getElementById("myCanvas");//得到<canvas>标签里id 3 var cxt=c.getContext("2d");//创建 context 对象 4 cxt.fillStyle="#FF0000";//给图形加颜色 5 cxt.fillRect(0,0,150,75);//图形大小,在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。 6 </script>
例子:如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 body 6 { 7 font-size:70%; 8 font-family:verdana,helvetica,arial,sans-serif; 9 } 10 </style> 11 <script type="text/javascript"> 12 function cnvs_getCoordinates(e) 13 { 14 x=e.clientX; 15 y=e.clientY; 16 document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; 17 } 18 19 function cnvs_clearCoordinates() 20 { 21 document.getElementById("xycoordinates").innerHTML=""; 22 } 23 </script> 24 </head> 25 <body style="margin:0px;"> 26 <p>把鼠标悬停在下面的矩形上可以看到坐标：</p> 27 <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> 28 <br /> 29 <br /> 30 <br /> 31 <div id="xycoordinates"></div> 32 </body> 33 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>通过指定从何处开始，在何处结束，来绘制一条线</title> 6 7 </head> 8 <body> 9 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 10 你的浏览器不支持canvas! 11 </canvas> 12 <script type="text/javascript"> 13 var c=document.getElementById("myCanvas"); 14 var cxt=c.getContext("2d");//2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。 15 cxt.moveTo(10, 10);//开始起点 16 cxt.lineTo(150, 50);//画布中第二个点 17 cxt.lineTo(10,50);//画布中第二个点到这个点的线 18 cxt.lineTo(10, 100);//最后垂直线 19 cxt.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。 20 </script> 21 </body> 22 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圆</title> 6 7 </head> 8 <body> 9 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 10 你的浏览器不支持canvas! 11 </canvas> 12 <script type="text/javascript"> 13 var c=document.getElementById("myCanvas"); 14 var cxt=c.getContext("2d"); 15 cxt.fillStyle="pink";//填充样式 16 cxt.beginPath(); 17 cxt.arc(70, 50, 35, 0, Math.PI*2, true); 18 cxt.closePath();//将路径闭合 19 cxt.fill();//fill() 方法填充当前的图像（路径）。默认颜色是黑色。这个例子是粉色. 20 </script> 21 </body> 22 </html>
圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise);
x:圆心x坐标.y:圆心y坐标.straAngle:开始角度.endAngle:结束角度
anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针
ps：经过试验证明书本上ture是顺时针，false是逆时针是错误的，
而且无论是逆时针还是顺时针，角度都沿着顺时针扩大.
先看这张图:
圆的效果如下:
HTML5中的<canvas>画布:使用canvas元素在网页上绘制线条和圆(1),布布扣,bubuko.com
HTML5中的<canvas>画布:使用canvas元素在网页上绘制线条和圆(1)
标签：des style blog java color 使用 os io
原文地址：http://www.cnblogs.com/liubeimeng/p/3865580.html
