html - 使画布在画布之外可见

Question

是否可以在自己的区域外渲染画布元素？

在此示例中，我绘制了一个矩形，其中 x 坐标和 y 坐标为负值。是否可以渲染整个矩形？overflow规则在这里不起作用。

jsfiddle

html

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col main">
      <canvas id="example" width="150" height="150"></canvas>
    </div>
  </div> 
</div>

javascript

var canvas = document.getElementById("example");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(-30, -30, 150, 100);
ctx.fillStyle = "red";
ctx.fill();

css

.row {
  background: CornflowerBlue;
  margin-top: 20px;
}

.col {
  padding: 0 !important;
  border: solid 1px #6c757d;
  padding: 10px;
}

.main, canvas {
  overflow: visible;
}

标签： htmlcsshtml5-canvas