html5画布防止线宽缩放

如果我绘制一个说linewidth = 2的矩形，然后将其缩放为矩形大小的两倍，我会得到一个矩形，其边框是初始线宽的两倍。html5画布防止线宽缩放

有没有一种方法可以将线宽保持为可感知的尺寸2或原始尺寸。

总之，我只想缩放矩形的大小，但保持线宽视觉大小的2

我试过前后的规模（2,2）命令设置线宽，但边框的宽度也增加。

一种选择是将线宽除以比例因子，如果x和y比例因子相同，这将起作用。

我没有选择缩放矩形的宽度和高度，我需要使用缩放命令，因为我需要缩放矩形内的其他对象。

来源

2010-09-25 Nilesh

好吧，你有两个选择：

你可以做你自己的坐标和维度，例如缩放

ctx.strokeRect(scaleX * x, scaleY * y, scaleX * width, scaleY * height) ;

而且您还需要将缩放应用于所有其他对象。

或者，您可以应用缩放而不是依赖lineWidth绘制矩形的边框。一个简单的方法是通过填写正确的区域，然后取出内部绘制矩形，减去边框，就像这样：

var scaleX = 1.5, scaleY = 2; 
var lineWidth = 2; 

ctx.scale(scaleX, scaleY); 

ctx.fillStyle = "#000"; 
ctx.fillRect(100, 50, 100, 
ctx.clearRect(100+lineWidth/scaleX, 50+lineWidth/scaleY, 100-(2*lineWidth)/scaleX, 60-(2*lineWidth)/scaleY);

来源

2010-09-26 13:19:10 andrewmu

的OP似乎经历完全相反...本'lineWidth' _is_受着缩放？ – MrWhite 2010-09-26 14:16:54

好悲伤！这是我的一些非常不好的阅读理解！并测试自己，是的，它受到影响。 – andrewmu 2010-09-27 09:03:00

我改变了我的答案 - 谢谢你指出我的错误。 – andrewmu 2010-09-27 09:19:59

线宽应事先缩小。

ctx.lineWidth = 2/Math.max(scaleX, scaleY); 
ctx.scale(scaleX, scaleY); 
ctx.fillRect(50, 50, 50, 50);

来源

2012-06-02 16:01:30 naka

，但这并不妨碍线宽缩放，只能确保线宽不超过一个值。 – Calmarius 2014-02-06 12:18:32

您可以使用转换定义路径，并在没有转换的情况下对其进行描边。这种方式线宽将不会被转换。

实施例：

<!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>

来源

2014-08-22 13:00:05

你测试过哪些浏览器？在Chrome 38上它似乎不起作用。 – b0fh 2014-11-16 21:40:29

太棒了！适用于我的Chrome 44，FF 39，IE 9+ – 2015-07-31 12:13:59

这很好用。但是，如果在还原之前存在剪辑（）区域，则该区域将丢失，并且如果剪辑区域在描边之前添加，则会剪切剪辑路径。还有其他解决方案吗？ – PeterT 2017-03-22 01:00:11

html5画布防止线宽缩放

回答

相关问题