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

时间：2022-12-02 19:20:41

来自：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>

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

可以看到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>

小强的HTML5移动开发之路（6）——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" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById('1');
  11. var p=c.getContext("2d");
  12. p.moveTo(10,10);
  13. p.lineTo(150,50);
  14. p.lineTo(10,50);
  15. p.stroke();
  16. </script>
  17. </html>

小强的HTML5移动开发之路（6）——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" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById('1');
  11. var p=c.getContext("2d");
  12. p.fillStyle="#FF0000";
  13. p.beginPath();
  14. p.arc(80,80,15,0,Math.PI*2,true);
  15. p.closePath();
  16. p.fill();
  17. </script>
  18. </html>

小强的HTML5移动开发之路（6）——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" 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>

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

六、绘制图片

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  5. Your browser does not support the canvas element.
  6. </canvas>
  7. <script type="text/javascript">
  8. var c=document.getElementById("myCanvas");
  9. var cxt=c.getContext("2d");
  10. var img=new Image()
  11. img.src="/i/eg_flower.png"
  12. cxt.drawImage(img,0,0);
  13. </script>
  14. </body>
  15. </html>

小强的HTML5移动开发之路（6）——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" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById('1');
  11. var p=c.getContext("2d");
  12. p.fillStyle="#FF0000";
  13. p.moveTo(10,10);
  14. p.lineTo(150,50);
  15. p.lineTo(10,50);
  16. p.lineTo(20,30);
  17. p.fill();
  18. </script>
  19. </html>

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

相关文章