• html5的新标签

  • <canvas>标签只是图像容器，必须使用js来绘制图形

  • 可以通过多种方法使用canvas绘制路径，盒，圆，字符以及添加图像

  1.   <!-- 注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. -->
  2.   <canvas id="myCanvas" width="600" height="600" style="border: 1px solid red;background-color: pink;">
  3.  
  4.   </canvas>
  1.   <!-- 1.矩形 -->
  2.   <script type="text/javascript">
  3.     /*获取元素*/
  4.     var c = document.getElementById("myCanvas");
  5.     /*获取绘图工具*/
  6.     var ctx = c.getContext("2d");
  7.     /* 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。 */
  8.     ctx.fillStyle = "#ccc";
  9.     /* fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 */
  10.     ctx.fillRect(50, 50, 200, 100);
  11.   </script>
  1.   <!-- 2.折线 -->
  2.   <script type="text/javascript">
  3.     /*获取元素*/
  4.     var c = document.getElementById("myCanvas");
  5.     /*获取绘图工具*/
  6.     var ctx = c.getContext("2d");
  7.     /* 起点 */
  8.     ctx.moveTo(10, 10);
  9.     /* 移动 */
  10.     ctx.lineTo(200, 100);
  11.     ctx.lineTo(400, 400);
  12.     /* 线宽 */
  13.     ctx.lineWidth = 20;
  14.     /* 线条颜色 */
  15.     ctx.strokeStyle = \'red\';
  16.     /* 使用 stroke() 方法来绘制线条 */
  17.     ctx.stroke();
  18.   </script>
  1.   <!-- 2.折线 -->
  2.   <script type="text/javascript">
  3.     /*获取元素*/
  4.     var c = document.getElementById("myCanvas");
  5.     /*获取绘图工具*/
  6.     var ctx = c.getContext("2d");
  7.     /* 起点 */
  8.     ctx.moveTo(10, 10);
  9.     /* 移动 */
  10.     ctx.lineTo(200, 100);
  11.     ctx.lineTo(400, 400);
  12.     /* 线宽 */
  13.     ctx.lineWidth = 20;
  14.     /* 线条颜色 */
  15.     ctx.strokeStyle = \'red\';
  16.     /* 使用 stroke() 方法来绘制线条 */
  17.     ctx.stroke();
  18.   </script>
  1. <!-- 3.画一个红色填充的三角形 -->
  2.   <script type="text/javascript">
  3.     /*获取元素*/
  4.     var c = document.getElementById("myCanvas");
  5.     /*获取绘图工具*/
  6.     var ctx = c.getContext("2d");
  7.     /* 起点 */
  8.     ctx.moveTo(100,100);
  9.     /* 移动 */
  10.     ctx.lineTo(200,200);
  11.     ctx.lineTo(100,200);
  12.     //这样连接的不是很完美
  13.     //ctx.lineTo(100,100);
  14.     ctx.closePath();//自动闭合
  15.  
  16.  
  17.     /* 线宽 */
  18.     ctx.lineWidth = 20;
  19.     /* 线条颜色 */
  20.     ctx.strokeStyle = \'green\';
  21.     /* 使用 stroke() 方法来绘制线条 */
  22.     ctx.stroke();
  25.     /* 填充 */
  26.     ctx.fillStyle = \'red\';
  27.     //填充
  28.     ctx.fill();
  29.   </script>

我填充了绿色

开启新路径方法：

  1. <script type="text/javascript">
  2.     /*获取元素*/
  3.     var c = document.getElementById("myCanvas");
  4.     /*获取绘图工具*/
  5.     var ctx = c.getContext("2d");
  6.     /* 1.画一个大的正方 */
  7.     ctx.moveTo(100, 100);
  8.     ctx.lineTo(300, 100);
  9.     ctx.lineTo(300, 300);
  10.     ctx.lineTo(100, 300);
  11.     ctx.closePath();
  12.     /* 边框线宽 */
  13.     ctx.lineWidth = 5;
  14.     /* 线条颜色 */
  15.     ctx.strokeStyle = \'yellow\';
  16.     /* 使用 stroke() 方法来绘制线条 */
  17.     ctx.stroke();
  18.     /* 填充 */
  19.     ctx.fillStyle = \'purple\';
  20.     ctx.fill();
  21.     //开启新路径  让每一段路径称为独立的路径  可以分别设置样式（填充的样式 描边的样式）
  22.     ctx.beginPath();
  23.     /* 2.画一个小的正方 */
  24.     ctx.moveTo(120, 120);
  25.     ctx.lineTo(120, 220);
  26.     ctx.lineTo(220, 220);
  27.     ctx.lineTo(220, 120);
  28.     ctx.closePath();
  29.     /* 边框线宽 */
  30.     ctx.lineWidth = 5;
  31.     /* 线条颜色 */
  32.     ctx.strokeStyle = \'red\';
  33.     /* 使用 stroke() 方法来绘制线条 */
  34.     ctx.stroke();
  36.     /* 填充 */
  37.     ctx.fillStyle = \'green\';
  38.     ctx.fill();
  40.     /* 填充原则：非零环绕规则:
  41.       从该区域向外画一条线，与边框相交顺时针+1，逆时针-1，和为0时，不填充
  42.       不管是多少个边框嵌套，都要从每个嵌套区域划线一次
  43.      */
  44.   </script>

 

非零环绕原则

  1. <script type="text/javascript">
  2.     /*获取元素*/
  3.     var c = document.getElementById("myCanvas");
  4.     /*获取绘图工具*/
  5.     var ctx = c.getContext("2d");
  6.     /* 1.画一个大的正方 */
  7.     ctx.moveTo(100, 100);
  8.     ctx.lineTo(300, 100);
  9.     ctx.lineTo(300, 300);
  10.     ctx.lineTo(100, 300);
  11.     ctx.closePath();
  12.     /* 边框线宽 */
  13.     ctx.lineWidth = 5;
  14.     /* 线条颜色 */
  15.     ctx.strokeStyle = \'yellow\';
  16.     /* 使用 stroke() 方法来绘制线条 */
  17.     ctx.stroke();
  19.     /* 2.画一个小的正方 */
  20.     ctx.moveTo(120, 120);
  21.     ctx.lineTo(120, 220);
  22.     ctx.lineTo(220, 220);
  23.     ctx.lineTo(220, 120);
  24.     ctx.closePath();
  25.     /* 边框线宽 */
  26.     ctx.lineWidth = 5;
  27.     /* 线条颜色 */
  28.     ctx.strokeStyle = \'red\';
  29.     /* 使用 stroke() 方法来绘制线条 */
  30.     ctx.stroke();
  32.     /* 填充 */
  33.     /* 填充原则：非零环绕规则:
  34.       从该区域向外画一条线，与边框相交顺时针+1，逆时针-1，和为0时，不填充
  35.       不管是多少个边框嵌套，都要从每个嵌套区域划线一次
  36.      */
  37.     ctx.fillStyle = \'green\';
  38.     ctx.fill();
  41.   </script>

  1.  <script type="text/javascript">
  2.     var c = document.getElementById("myCanvas");
  3.     var ctx = c.getContext("2d");
  4.     
  5.     /*红色 10*/
  6.     ctx.moveTo(100,100);
  7.     ctx.lineTo(200,50);
  8.     ctx.lineTo(300,100);
  9.     ctx.lineWidth = 10;
  10.     ctx.lineCap = \'butt\'; //默认 线两端样式  啥也没有
  11.     ctx.lineJoin = \'miter\'; //没有没有任何样式
  12.     ctx.strokeStyle = \'red\';
  13.     ctx.stroke();
  15.     ctx.beginPath();
  17.     /*蓝色 15*/
  18.     ctx.moveTo(100,200);
  19.     ctx.lineTo(200,150);
  20.     ctx.lineTo(300,200);
  21.     ctx.lineWidth = 15;
  22.     ctx.lineCap = \'square\'; //线两端样式  方形的
  23.     ctx.lineJoin = \'bevel\';
  24.     ctx.strokeStyle = \'blue\';
  25.     ctx.stroke();
  27.     ctx.beginPath();
  29.     /*绿色 20*/
  30.     ctx.moveTo(100,300);
  31.     ctx.lineTo(200,250);
  32.     ctx.lineTo(300,300);
  33.     /*线两端样式*/
  34.     ctx.lineCap = \'round\';//线两端样式  圆帽子
  35.     /*线拐点样式*/
  36.     ctx.lineJoin = \'round\';
  38.     ctx.lineWidth = 20;
  39.     ctx.strokeStyle = \'green\';
  40.     ctx.stroke();
  42.   </script>

 

 

版权声明：本文为houfee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/houfee/p/9806253.html