如何让用户仅使用背景图像在x轴上的画布上画一条线？

debugcn 发表于 Dev

阿德尔坎索

我有一个包含图像的画布，我想让用户仅在x轴上在其上绘制线条，并且不清除背景图像。

var lala = document.getElementById('demo');
var canvas = lala,
  ctx = canvas.getContext('2d'),
  img = new Image;
img.onload = start;
img.src = 'https://via.placeholder.com/300';

function start() {
  ctx.drawImage(img, 0, 0, demo.width, demo.height);
}

function drawOnX() {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="demo" width=300 height=300></canvas>
<button onclick = "drawOnX();"> start drawing </button>

易卜拉欣·马尔里尔

只需使用moveTo(x, y)和lineTo(x, y)定义路径，然后使用stroke()绘制它，就可以分别使用lineWidth和strokeStyle指定线条的粗细和样式。

var lala = document.getElementById('demo');
var canvas = lala,
  ctx = canvas.getContext('2d'),
  img = new Image;
img.onload = start;
img.src = 'https://via.placeholder.com/300';

function start() {
  ctx.drawImage(img, 0, 0, demo.width, demo.height);
}

function drawOnX() {
  ctx.moveTo(0, 150);
  ctx.lineTo(300, 150);

  ctx.lineWidth = 3;
  ctx.strokeStyle = "red";

  ctx.stroke();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="demo" width=300 height=300></canvas>
<button onclick = "drawOnX();"> start drawing </button>

在调用之前，您可以进行多次呼叫，moveTo并lineTo绘制复杂的路径或形状（例如，星形）stroke。

或者，如果您只对水平线感兴趣，则可以使用fillRect(x, y, width, height)绘制长的微小矩形来模仿一条线（宽度为画布的全宽，高度为线的粗细），则可以使用fillStyle在这种情况下，可以对矩形进行样式设置，如下所示：

var lala = document.getElementById('demo');
var canvas = lala,
  ctx = canvas.getContext('2d'),
  img = new Image;
img.onload = start;
img.src = 'https://via.placeholder.com/300';

function start() {
  ctx.drawImage(img, 0, 0, demo.width, demo.height);
}

function drawOnX() {
  ctx.fillStyle = "red";

  ctx.fillRect(0, 149, 300, 2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="demo" width=300 height=300></canvas>
<button onclick = "drawOnX();"> start drawing </button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。