html5畫布防止線寬縮放
摘要：
如果我繪製一個長度為linewidth = 2的矩形,然後將其縮放為矩形的大小的兩倍,我得到一個矩形,它的邊界是初始線寬的兩倍.
有沒有辦法將線寬保持為2或原始大小的感覺大小.
簡而言之,我想只是縮放矩形的大小,但是將線寬保持為大小2.
我嘗試在scale(2,2...
如果我繪製一個長度為linewidth = 2的矩形,然後將其縮放為矩形的大小的兩倍,我得到一個矩形,它的邊界是初始線寬的兩倍.
有沒有辦法將線寬保持為2或原始大小的感覺大小.
簡而言之,我想只是縮放矩形的大小,但是將線寬保持為大小2.
我嘗試在scale(2,2)命令之前和之後設定線寬,但邊框寬度也增加.
一個選項是將線寬除以比例因子,如果x和y比例因子相同,這將起作用.
我沒有選擇縮放矩形寬度和高度,我需要使用scale命令,因為我有其他需要縮放的矩形內的物件.
您可以使用轉換來定義路徑,而無需一個路徑.這樣線寬不會被改變.
例：
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> 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 </script> </body> </html>
http://stackoverflow.com/questions/3794354/html5-canvas-prevent-linewidth-scaling