たとえば、線幅 = 2 の長方形を描画し、長方形のサイズを 2 倍に拡大すると、境界線が最初の線幅の 2 倍のサイズの長方形が得られます。
線幅を 2 の認識サイズまたは元のサイズに保つ方法はありますか。
つまり、長方形のサイズを拡大縮小しながら、線幅を視覚的にサイズ 2 のままにしたいのです。
scale(2,2)コマンドの前後で線幅を設定してみましたが、境界線の幅も広くなってしまいました。
1 つのオプションは、線幅をスケール係数で割ることです。これは、x スケール係数と y スケール係数が同じ場合に機能します。
長方形の幅と高さを拡大縮小するオプションがないので、長方形内に拡大縮小が必要な他のオブジェクトがあるため、スケール コマンドを使用する必要があります。
ベストアンサー1
変換ありのパスを定義し、変換なしでストロークすることができます。そうすれば、線の幅は変換されません。
例：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save(); //save context without transformation
ctx.scale(2, 0.5); //make transformation
ctx.beginPath(); //define path
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.restore(); //restore context without transformation
ctx.stroke(); //stroke path<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">