html5 canvas防止线宽缩放 [英] html5 canvas prevent linewidth scaling
问题描述
如果我绘制一个矩形，说linewidth = 2，然后缩放到双倍的矩形，我得到一个矩形，其边框的大小是初始线宽。
If I draw a rectangle of say linewidth=2 and then scale it to double the size of the rectangle, I get a rectangle that has its border double the size of the initial linewidth.
有一种方法来保持线宽到感知的大小2或原始大小。
Is there a way to keep the linewidth to the perceived size of 2 or the original size.
简而言之，我想只是缩放大小
In short, I want to just scale the size of the rectangle but keep the linewidth visually of size 2.
我尝试在scale（2,2）命令之前和之后设置线宽，但是边框宽度也增加了。
I tried setting the linewidth before and after the scale(2,2) command but the border width also increases.
一个选项是将线宽除以比例因子，如果x和y比例因子相同，这将工作。
One option is to divide the linewidth by the scale factor and this will work if the x and y scale factors are the same.
我没有缩放矩形宽度和高度的选项，我需要使用scale命令，因为矩形中有其他需要缩放的对象。
I don't have the option to scale the rectangle width and height and I need to use the scale command as I have other objects within the rectangle that need the scaling.
推荐答案
您可以使用转换定义路径，而不使用转换。
You can define path with transformation and stroke it without one. That way line width won't be transformed.
示例：
<!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>
这篇关于html5 canvas防止线宽缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
