HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

最新推荐文章于 2023-06-21 16:25:18 发布

weixin_30522183

最新推荐文章于 2023-06-21 16:25:18 发布

阅读量193

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liubeimeng/p/3865580.html

版权

什么是 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>

其实,canvas也可以画圆:

 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是逆时针是错误的，
     而且无论是逆时针还是顺时针，角度都沿着顺时针扩大.

先看这张图: