CANVAS - 100％宽度的线

Question

我想在整个屏幕上使用100％宽度的CANVAS绘制一条线，类似于＆＃39;图像 - 背景＆＃39;中的css。身体如下例所示：

例如：

使用CSS制作

body {
  background-image: url(horizontal-line.png);
  background-repeat: repeat-x;
  background-position: 0px 10%;
}

使用CANVAS

???

我该如何解决？谢谢

Answer 1

更新了演示： https://jsfiddle.net/mulperi/xnob50yd/1/ 一个完整的窗口大小的画布和屏幕中间的100％笔划

以下是css和js部分：

<style>
  canvas {
    padding: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>
<canvas id="canvas"></canvas>
<script>
    const c = document.getElementById("canvas");
    const ctx = c.getContext("2d");

    c.width = window.innerWidth;
    c.height = window.innerHeight;

    ctx.fillStyle = "red";
    ctx.fillRect(0, window.innerHeight / 2, window.innerWidth, 10);
    ctx.fill();

    window.onresize = function() {
      ctx.width = window.innerWidth;
      ctx.height = window.innerHeight;
    }
</script>

使用 window.onresize ，您可以确保画布随浏览器窗口动态更改大小。

Answer 2

Canvas＆lt; hr＆gt;线

使用javascript查找屏幕的宽度。 document.documentElement.clientWidth
然后用它来设置canvas元素的大小。 canvas.width = screenWidth;
然后绘制一个直径宽度为2px的高度，其宽度等于screenWidth ctx.fillRect(0, 10, screenWidth, 2)
什么是10？在此示例中，我将画布设置为20高度。所以画布的中间是10.

＆＃13;

＆＃13;

document.addEventListener("DOMContentLoaded", function() {
  draw();
});

function draw() {
  var canvas = document.getElementById('demo');
  //Set the canvas to viewport size
  var screenWidth = document.documentElement.clientWidth;
  canvas.width = screenWidth;
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'rgb(255, 100, 0)';
    ctx.fillRect(0, 10, screenWidth, 2);

  } else {
    convas.addChild("No canvas here");
  }
}

＆＃13;

body {
  margin: 0;
}


/*to make the canvas visible*/

#demo {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

＆＃13;

<p>Canvas</p>
<canvas id="demo" width="" height="20"></canvas>

＆＃13;

＆＃13;

＆＃13;