JavaScript 画布的缩放在旋转后看起来很奇怪

Question

我有一个html画布，它在JS脚本中拉伸到浏览器窗口尺寸。我想保持画布与窗口尺寸的适合(通过ctx.scale或ctx.setTransform(，但是当窗口垂直时将其旋转90°，即window.innerHeight>window.innerWidth。但是，我在垂直案例中看到了一些奇怪的行为，不知道我错过了什么。

我的JavaScript代码如下：

var canvas = document.getElementById("GameCanvas");
var ctx = canvas.getContext("2d");
canv_start_w = canvas.width;
canv_start_h = canvas.height;
// drawing functions
function set_canvas_bg() {  
ctx.fillStyle = "lightblue";
ctx.fillRect(0,0,canvas.width, canvas.height);
}
function draw_line() {
ctx.beginPath();
ctx.lineWidth="3";
ctx.strokeStyle="black";
ctx.moveTo(canv_start_w/16, canv_start_h/2);
ctx.lineTo(15*canv_start_w/16, canv_start_h/2);
ctx.stroke();
ctx.closePath();
}
function draw_circ() {
ctx.beginPath();
ctx.fillStyle="black";
ctx.arc(canv_start_w/2, canv_start_h/2, canv_start_w/10, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
}
// canvas transformation functions
function resize_canvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function scale_ctx() {
var smaller_dim = Math.min(canvas.width, canvas.height);
var larger_dim = Math.max(canvas.width, canvas.height)
var xscale = larger_dim/canv_start_w;
var yscale = smaller_dim/canv_start_h;
ctx.setTransform(xscale, 0, 0, yscale, 0, 0);
}
function rotate_ctx(deg) {
ctx.rotate((deg/360)*(2*Math.PI));
}
function update() {
resize_canvas();
scale_ctx();
// distinction: vertical or horizontal window?
if (window.innerWidth < window.innerHeight) {
// CASE 1: vertical
rotate_ctx(90);
ctx.translate(0, -canvas.width); // move back into view
} else {
// CASE 2: horizontal
rotate_ctx(0);
ctx.translate(0, 0); // move back into view
}
// drawing elements to canvas
set_canvas_bg();
draw_circ();
draw_line();
requestAnimationFrame(update);
}
update();

Answer 1

每次更改画布尺寸时，都会删除上下文转换(即旋转、缩放(。可以在这里找到并试验工作脚本：https://jsfiddle.net/nicoa47/3fsan6c0/

解决方案分为三部分，即

(1( 在每个更新循环开始时通过以下方式重置转换

ctx.setTransform(1, 0, 0, 1, 0, 0);

(2( 将上下文转换为窗口中心，并在旋转/缩放后平移回来(确保围绕窗口中心旋转(

ctx.translate(window.innerWidth/2, window.innerHeight/2);
// rotate...
// scale...
ctx.translate(-window.innerWidth/2, -window.innerHeight/2);

在垂直情况下，需要交换第二个翻译的参数。

(3(根据当前比例更改缩放功能。这意味着，创建新变量

var canv_current_w = window.innerWidth;
var canv_current_h = window.innerHeight;

跟踪最后一帧的尺寸，即在更新循环集的末尾：

canv_current_w = window.innerWidth;
canv_current_h = window.innerHeight;

同样，在垂直情况下交换值。将canv_start_w替换为缩放函数中的这些新变量canv_start_h。