关于js画布的问题，这个为什么画出来是正方形？

qq_39454760 2017-12-13 07:43:54

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="one" width="800" height="800"></canvas>
</body>
</html>
<script type="text/javascript">
var canvas=document.getElementById("one");
var context=canvas.getContext("2d");
context.scale(2,1);
context.rotate(Math.PI/2);
context.fillRect(0,-50,100,50);
</script>

...全文

495 26 打赏收藏转发到动态举报

写回复

用AI写文章

26 条回复

切换为时间正序

请发表友善的回复…

发表回复

functionsub 2017-12-15

打赏
举报

理了一下，应该就是楼上说的那样。放大时候是横向放大2倍，再旋转就变成纵向了。

functionsub 2017-12-15

打赏
举报

额。。又仔细看了下，是我弄错了，我把fillrect后面2个参数的意思搞错了。

qq_39454760 2017-12-15

打赏
举报

越来越懵了我先理下思路

functionsub 2017-12-15

打赏
举报

老铁，你画布旋转，坐标系不会跟着变的，是你没弄懂。

qq_39454760 2017-12-15

打赏
举报

引用 13 楼 functionsub 的回复:

说了是有一半在画布外面，你们还在这争。明明(0,-50)到(100,50)，不考虑缩放本身就是一个正方形，要知道canvas左上角的坐标点是(0,0)。

恕我直言，你是真的没弄懂

functionsub 2017-12-15

打赏
举报

说了是有一半在画布外面，你们还在这争。明明(0,-50)到(100,50)，不考虑缩放本身就是一个正方形，要知道canvas左上角的坐标点是(0,0)。

qq_39454760 2017-12-15

打赏
举报

引用 11 楼 jslang 的回复:

缩放和旋转都只对之后的绘制和操作起作用，不会改变之前的设置。开始x轴放大两倍，旋转时这一设置并没有变成y轴放大，只是旋转之后再绘制图形时用的是新坐标系，对于新坐标系来说原来的x轴就相当于现在的y轴。

对于新坐标系来说原来的x轴就相当于现在的y轴===不管怎么变化，扩大的是x轴，虽然x轴旋转到竖直方向了（现在y轴在水平反向了，但是y轴没有缩放），那100就是竖直方向的长度，扩大2倍就是200，为什么结果还是100？

天际的海浪 2017-12-15

打赏
举报

qq_39454760 2017-12-15

打赏
举报

引用 22 楼 functionsub 的回复:

看下图吧。。

你这个图不对，算了，不纠结了

qq_39454760 2017-12-15

打赏
举报

引用 23 楼 functionsub 的回复:

[quote=引用 21 楼 qq_39454760 的回复:] [quote=引用 20 楼 functionsub 的回复:] [quote=引用 19 楼 qq_39454760 的回复:] [quote=引用 18 楼 functionsub 的回复:] 理了一下，应该就是楼上说的那样。放大时候是横向放大2倍，再旋转就变成纵向了。

那你还是没懂，纵向并没有放大，放大的是横向[/quote] 旋转了90度，原来的横向不就变成现在的纵向了？？？[/quote] 旋转之后，原来的横向变成现在的纵向了，然而被扩大的还是横向，这正是我发帖的原因[/quote]

好像放大并不会受旋转影响。。。他始终作用在横向上，哪怕是旋转后的横向是Y轴。。。 [/quote] 用结果去揣测就免了，结果我早就知道了，发帖前就知道

functionsub 2017-12-15

打赏
举报

引用 21 楼 qq_39454760 的回复:

[quote=引用 20 楼 functionsub 的回复:] [quote=引用 19 楼 qq_39454760 的回复:] [quote=引用 18 楼 functionsub 的回复:] 理了一下，应该就是楼上说的那样。放大时候是横向放大2倍，再旋转就变成纵向了。

好像放大并不会受旋转影响。。。他始终作用在横向上，哪怕是旋转后的横向是Y轴。。。

functionsub 2017-12-15

打赏
举报

看下图吧。。

qq_39454760 2017-12-15

打赏
举报

引用 20 楼 functionsub 的回复:

[quote=引用 19 楼 qq_39454760 的回复:] [quote=引用 18 楼 functionsub 的回复:] 理了一下，应该就是楼上说的那样。放大时候是横向放大2倍，再旋转就变成纵向了。

那你还是没懂，纵向并没有放大，放大的是横向[/quote] 旋转了90度，原来的横向不就变成现在的纵向了？？？[/quote] 旋转之后，原来的横向变成现在的纵向了，然而被扩大的还是横向，这正是我发帖的原因

functionsub 2017-12-15

打赏
举报

引用 19 楼 qq_39454760 的回复:

[quote=引用 18 楼 functionsub 的回复:] 理了一下，应该就是楼上说的那样。放大时候是横向放大2倍，再旋转就变成纵向了。

那你还是没懂，纵向并没有放大，放大的是横向[/quote] 旋转了90度，原来的横向不就变成现在的纵向了？？？

qq_39454760 2017-12-15

打赏
举报

引用 18 楼 functionsub 的回复:

理了一下，应该就是楼上说的那样。放大时候是横向放大2倍，再旋转就变成纵向了。

那你还是没懂，纵向并没有放大，放大的是横向

天际的海浪 2017-12-14

打赏
举报

缩放和旋转都只对之后的绘制和操作起作用，不会改变之前的设置。开始x轴放大两倍，旋转时这一设置并没有变成y轴放大，只是旋转之后再绘制图形时用的是新坐标系，对于新坐标系来说原来的x轴就相当于现在的y轴。

qq_39454760 2017-12-14

打赏
举报

引用 9 楼 jslang 的回复:

我认为我已经解释的很清楚了，你还不理解我就没办法了。你想啊，你在缩放与绘制矩形之间进行旋转，旋转前后的坐标系肯定不一致啊。

开始x轴是水平的，放大两倍后，在旋转到竖直方向，这时候不是竖直方向的长度扩大两倍吗，x=100，y=50，放大后应该是x轴方向（竖直方向）为200，y方向（水平）为50，那个环节出了问题？

天际的海浪 2017-12-14

打赏
举报

我认为我已经解释的很清楚了，你还不理解我就没办法了。你想啊，你在缩放与绘制矩形之间进行旋转，旋转前后的坐标系肯定不一致啊。

qq_39454760 2017-12-14

打赏
举报

引用 7 楼 jslang 的回复:

[quote=引用 6 楼 qq_39454760 的回复:] [quote=引用 5 楼 jslang 的回复:] [quote=引用 4 楼 qq_39454760 的回复:] [quote=引用 2 楼 jslang 的回复:] context.scale(2,1);设置像素缩放纵横比为2比1 context.fillRect(0,-50,100,50);这里100和50比例也是2比1，当然是正方形了

画布x轴扩大2倍，后面矩形宽度是高度的2倍，画出来应该为宽度是高度的4倍吧，为什么是宽高相等了呢？[/quote] 你context.rotate(Math.PI/2);把画布转了90度，x轴与y轴不就颠倒了吗？[/quote] x轴与y轴颠倒只是改变画布上的坐标轴的方向，这里的100还是x轴，50还是y轴，并没有调换吧[/quote] 你是先缩放再旋转。放大的是x轴，旋转之后x和y轴就颠倒了，等于是y轴放大。如果是先旋转再缩放，旋转x和y轴颠倒之后再放大x轴，就没问题了 context.rotate(Math.PI/2); context.scale(2,1); context.fillRect(0,-50,100,50); [/quote] 从结果来看确实是y放大了，但是从理论上来说，x轴不是带着放大旋转的吗，为什么变成y放大了？

天际的海浪 2017-12-14

打赏
举报

引用 6 楼 qq_39454760 的回复:

[quote=引用 5 楼 jslang 的回复:] [quote=引用 4 楼 qq_39454760 的回复:] [quote=引用 2 楼 jslang 的回复:] context.scale(2,1);设置像素缩放纵横比为2比1 context.fillRect(0,-50,100,50);这里100和50比例也是2比1，当然是正方形了