主页 / 问题 / 933834
Accepted
recile
Asked:2020-01-19 03:00:11 +0000 UTC2020-01-19 03:00:11 +0000 UTC

如何在画布上的两行之间放置填充颜色

  • 772

这样两行之间就有某种填充颜色 

const canvas = document.getElementById("can");
const context = canvas.getContext('2d');
context.beginPath();
context.lineWidth=2;
context.moveTo(150,50);
context.lineTo(150,150);







context.lineWidth=2;
context.moveTo(250,50);
context.lineTo(250,150);
context.stroke();
width: 400px;
  height: 200px;
  border: 3px solid black;
  margin: 40px;
<canvas id="can" width="400" height="200"></canvas>

javascript

2 个回答

  1. const canvas = document.getElementById("can");
const context = canvas.getContext('2d');
context.beginPath();

context.lineWidth=2;
context.moveTo(150,50);
context.lineTo(150,150);

context.lineWidth=2;
context.moveTo(250,50);
context.lineTo(250,150);

context.stroke();
    canvas {
  width: 400px;
  height: 200px;
  border: 3px solid black;
  margin: 40px;
  background-image:url(https://www.gstatic.com/webp/gallery3/1.sm.png);
  background-size:100px 100px;
  background-repeat: no-repeat;
  background-position: 150px 50px;
}
    <canvas id="can" width="400" height="200"></canvas>

    • 1
  2. Best Answer

    你可以简单地做到这一点context.fillRect：

    const canvas = document.getElementById("can");
const context = canvas.getContext('2d');
context.fillStyle = "grey";
context.fillRect(0, 0, 100, 100);
    width: 400px;
  height: 200px;
  border: 3px solid black;
  margin: 40px;
    <canvas id="can" width="400" height="200"></canvas>

    如果还需要线条，那么先画一个正方形，再画线条：

    const canvas = document.getElementById("can");
const context = canvas.getContext('2d');

context.fillStyle = "red";
context.fillRect(150, 50, 100, 100);
context.beginPath();
context.lineWidth=2;
context.moveTo(150,50);
context.lineTo(150,150);
context.lineWidth=2;
context.moveTo(250,50);
context.lineTo(250,150);
context.stroke();
    width: 400px;
  height: 200px;
  border: 3px solid black;
  margin: 40px;
    <canvas id="can" width="400" height="200"></canvas>

    移动线条时不要忘记移动方块！

    • 1

相关问题