私のユースケースはCSSの境界線のレンダリングを模倣することです。 CanvasRenderingContext2D::rect
メソッドをCanvasRenderingContext2D::setLineDash
と使用して、CSSレンダラと同じ境界線描画をシミュレートすることができます(border: 5px dashed red
など)。この例を考えてみましょう:同じ方法でキャンバスに点線の四角形と点線の四角形を描くCSS境界線が動作する:同じ4つの辺を描画する
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.lineWidth = 5
ctx.strokeStyle = 'red'
ctx.lineCap = 'square'
ctx.setLineDash([10, 10]);
ctx.beginPath();
ctx.moveTo(2.5,2.5);
ctx.rect(2.5, 2.5, 195, 65);
ctx.stroke();
div {
border: 5px dashed red;
width: 200px;
height: 70px;
box-sizing: border-box;
margin-bottom: 5px;
}
canvas {
display: block;
width: 200px;
height: 70px;
}
<div></div>
<canvas width=200 height=70></canvas>
あなたは問題がエッジである気づくことがあります。
私はギャップやダッシュのサイズを変更しようとしていたが、CSSの例と同じ動作を取得することは不可能と思われる:エッジ上のラインはサイドのライン、その後大きくなっています。回避策として、すべての面を線で描くことが想像できますが、rect
メソッドを使用して1つの線を描画したいと考えています。
ありがとうございます。
説明とデモにはありがとうございます。私は、ダッシュをレンダリングする最も予測可能で正しい方法のように見えるので、線を使用します。また、 'round' – tenbits