我的任务是在画布上绘制许多矩形,但所有矩形都有一个旋转角度,它们必须在画布上旋转。我在寻找这个问题的解决方案时遇到的许多建议都指出了绘制一个矩形并旋转画布的方法(canvas.rotate(angle)),但它会旋转所有画布,并且只能使用一个矩形。在画布上绘制许多旋转矩形的最佳方法是什么?我想画矩形(单色,带颜料),但不是位图,因为时间效率和内存。
目前我主要的方法是创建一堆画布,在每个画布上绘制一个矩形,并考虑矩形的角度旋转画布。我认为这不是一个聪明的方式,因为有很多画布,我应该为每一个画布创建一个单独的表面文件夹,这是一个混乱。。。
请注意,对于每个矩形,我有它所有4个角的坐标,它的宽度、高度、中心、角度。
您可以旋转画布以绘制每个矩形,然后恢复原始方向。然后为下一个矩形设置新的旋转,绘制、存储并重复。
大致如下:
//Save and rotate canvas
canvas.save();
canvas.rotate(angle, pivotX, pivotY);
canvas.drawRect(...);
//restore canvas
canvas.restore();
// rotate and draw the second rectangle
canvas.rotate(angle, pivotX, pivotY);
canvas.drawRect(...);
canvas.restore();
// repeat as necessary
其中“角度”对于每个矩形都是不同的。
我试图使用矩阵旋转位图。然后我试着把它画在画布上。但它就这么消失了! 下面是我的代码: } 我已经删除了缩放画布和事件监听器等的函数。使代码小而易读。 我周期性地调用setDirection方法,但是在它被调用之后,“userImage”drawable就消失了。有人能告诉我这里出了什么问题吗。。 谢谢
实际上,我可以使用函数来完成。我从“HTML5画布-如何在图像背景上画一条线?”中得到的东西。但是我需要在不使用from函数的情况下绘制图像,如下所示:
问题内容: 我发现只能填充矩形,而没有圆角,该怎么办? 问题答案: HTML5画布没有提供绘制带有圆角的矩形的方法。 如何使用和方法? 您也可以使用方法代替方法。
我可以绘制图像,但我如何旋转该图像例如45度并绘制它,然后绘制另一个图像与-50度旋转在同一画布? 不适用于我,因为它会旋转所有画布内容。
在HTML和JavaScript中,这应该是一个非常简单的任务。我有一个图标栏,目前有一个单一的可点击链接,新的框。在图标栏下面,我有一张画布。我的目标是在用户每次按下new Box按钮时,在画布上绘制一个新的矩形。 现在,我的图标栏和画布正确显示,我可以单击图标栏的“新建框”链接,但画布上没有出现矩形,尽管我已将其参数指定为:。 null null
我正在画布上使用二次曲线绘制大型圆角矩形,如下所示: 我可以画一个完整的圆角矩形:http://jsfiddle.net/s9x3xn4z/ 我可以画出圆角矩形的上半部分:http://jsfiddle.net/1oeduLqx/ 但我不知道如何绘制圆角矩形的下半部分。 我的尝试都是这样结束的:http://jsfiddle.net/tfyagcew/ 这绝对不是我想要的! 如何绘制圆角矩形的下半