rect()与stroke()绘制矩形

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6. </head>
  7. <body>
  8. <canvas id="myCanvas" width="300" height="300" style="border: 1px solid #aaaaaa;">
  9.     您的浏览器不支持 HTML5 canvas 标签。
  10. </canvas>
  11. <script>
  12.     var c = document.getElementById('myCanvas');
  13.     var ctx = c.getContext("2d");
  15.     ctx.beginPath();
  16.     ctx.rect(20, 20, 150, 100);  //step1:指定矩形
  17.     ctx.stroke(); //step2:描边绘制
  20.     ctx.beginPath();
  21.     ctx.rect(120, 150, 150, 100);  //step1:指定矩形
  22.     ctx.fill(); //step2:填充绘制
  23. </script>
  24. </body>
  25. </html>

strokeRect 绘制矩形（无填充）

image.png

  1. var canvas = document.getElementById('myCanvas');
  2. var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象
  3. context.strokeStyle = "pink";  //图形边框的填充颜色
  4. context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：
  5. context.strokeRect(50,50,180,120);  //绘制矩形（无填充）
  6. context.strokeRect(110,110,180,120);

fillRect绘制矩形（填充）

image.png

  1. var canvas = document.getElementById('myCanvas');
  2. var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象
  3. context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式
  4. context.fillRect(50,50,200,200);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形

设置描边矩形边框为虚线

  • 用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset 属性设置起始偏移量。

image.png

  1. var canvas = document.getElementById('myCanvas');
  2. var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象
  3. context.strokeStyle = "pink";  //图形边框的填充颜色
  5. context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：
  6. context.setLineDash([20, 5]);  // [实线长度, 间隙长度]
  8. context.lineDashOffset = -0;
  9. context.strokeRect(50,50,180,120);  //绘制矩形（无填充）
  10. context.strokeRect(110,110,180,120);