Question

我是类似于马里奥的平台游戏，所以我会在画布上绘制所有内容。有一个电视显示屏，您可以随意旋转。在电视屏幕上绘制内容时，我想将其绘制为好像屏幕的左上角为（0; 0），但电视本身始终旋转和平移。如果存在更深层的嵌套元素，问题将变得更加严重。有没有什么框架或东西会有所帮助？您如何绘制嵌套场景？还是这不适合HTML5？

您可能建议将电视变成单独的画布，旋转并使用HTML进行翻译。但是，如果我需要将游戏中的某些内容放在电视后面，而其中一些放在前面，那是行不通的。除非我将每个实体都放在单独的画布中。在这种情况下将有数百个。这可能是个坏主意，对吧？

我已经为背景，UI等使用了单独的画布。但是仍然有很多实体可以同时出现在电视的后面和前面。

Answer 1

您可以使用transformations进行此操作。例如，如果您有一个draw()函数可以在画布上绘制内容，则可以执行以下操作

function draw(){
    //draw something on the canvas
}

ctx.translate(100,150);
ctx.rotate(Math.PI/4);
ctx.scale(0.5,0.5);
draw();

，内容将被旋转45度，左上角显示为（100; 150），大小为正常大小的一半。要重置转换，只需调用

ctx.resetTranform();
draw();

，所有内容将再次正常绘制。但是，这样做有一个缺点。内容不会被剪切，因此，如果draw呈现了本来会在屏幕外呈现的内容，则它将显示在您希望其存在的区域之外。

如何在HTMLCanvas上绘制复杂的，深层嵌套的场景？

1 个答案: