小强的HTML5移动开发之路（6）——Canvas图形绘制基础

小强的HTML5移动开发之路（6）——Canvas图形绘制基础
来自：http://blog.csdn.net/dawanganban/article/details/17686039

在前面提到Canvas是HTML5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。
一、Canvas标签的使用
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body>
7. <canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>
8. </body>
9. </html>
可以看到Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
二、画矩形
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body>
7. <canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
8. </body>
9. <script type="text/javascript">
10. var c=document.getElementById('1');
11. var p=c.getContext("2d");
12. <span style="white-space:pre"> </span>//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
13. p.fillStyle="#FF0000";
14. p.fillRect(0, 0, 300, 300);
15. p.fillStyle="rgba(0,0,255,0.5)";
16. p.fillRect(200,200,500,500);
17. </script>
18. </html>
三、画线条
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body>
7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
8. </body>
9. <script type="text/javascript">
10. var c=document.getElementById('1');
11. var p=c.getContext("2d");
13. p.moveTo(10,10);
14. p.lineTo(150,50);
15. p.lineTo(10,50);
16. p.stroke();
17. </script>
18. </html>
四、画圆形
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body>
7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
8. </body>
9. <script type="text/javascript">
10. var c=document.getElementById('1');
11. var p=c.getContext("2d");
13. p.fillStyle="#FF0000";
14. p.beginPath();
15. p.arc(80,80,15,0,Math.PI*2,true);
16. p.closePath();
17. p.fill();
18. </script>
19. </html>
五、渐变
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body>
7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
8. </body>
9. <script type="text/javascript">
10. var c=document.getElementById("1");
11. var cxt=c.getContext("2d");
12. var grd=cxt.createLinearGradient(0,0,175,50);
13. grd.addColorStop(0,"#FF0000");
14. grd.addColorStop(1,"#00FF00");
15. cxt.fillStyle=grd;
16. cxt.fillRect(0,0,175,50);
17. </script>
18. </html>
六、绘制图片
1. <!DOCTYPE HTML>
2. <html>
3. <body>
5. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
6. Your browser does not support the canvas element.
7. </canvas>
9. <script type="text/javascript">
11. var c=document.getElementById("myCanvas");
12. var cxt=c.getContext("2d");
13. var img=new Image()
14. img.src="/i/eg_flower.png"
15. cxt.drawImage(img,0,0);
17. </script>
19. </body>
20. </html>
七、多边形
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body>
7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
8. </body>
9. <script type="text/javascript">
10. var c=document.getElementById('1');
11. var p=c.getContext("2d");
13. p.fillStyle="#FF0000";
14. p.moveTo(10,10);
15. p.lineTo(150,50);
16. p.lineTo(10,50);
17. p.lineTo(20,30);
18. p.fill();
19. </script>
20. </html>
相关阅读:
PHP学习笔记(二)
PHP开发笔记（一）
PHP NOTE
python windows进制文件可以直接下载使用
 深入浅出Hyper-V网络虚拟化技术
 深入浅出Hyper-V网络虚拟化（序）
Windows Server 笔记（七）：Windows Server 2012 R2 NIC Teaming（NIC组）
Hyper-v Server 2012 R2增强会话模式
 Hyper-V动态迁移中？小心性能损失
 CLOUDSTACK FOR HYPER-V
原文地址：https://www.cnblogs.com/wanghang/p/6298975.html