html - Canvas 1 应调整到窗口大小，Canvas 2 应固定大小

Question

我有两个 Canvas 元素(canvas1 和 canvas2)。 “canvas1”应该调整大小以适应窗口，这是有效的。但是“canvas2”的大小应该保持固定。这不起作用，因为此 Canvas 也在调整大小以适合窗口。如何更改我的代码以获得所需的结果？

我有以下(简化的)HTML 代码:

<script>
{% block jquery %}

$(document).ready(function(){
    showImage();
});

function showImage(){
    var c = document.getElementById('canvas2')
    var ctx = c.getContext('2d');
    var img = new Image();
    img.src = '{{STATIC_URL}}/static/my_app/img/my_image.png' 
    c.width = 100
    c.height = 100
    img.onload = function () {
        ctx.drawImage(img,0,0, img.width, img.height);
    }
}
{% endblock %}
</script>

{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'collectorField/css/style.css' %}">

<canvas id="canvas1" width="1000" height="500" style="border:1px solid #000000;"></canvas>

<canvas id="canvas2" width="100" height="100" style="border:1px solid #000000;"></canvas>

{% endblock %}

链接的CSS样式表(style.css)定义如下:

canvas {
  background-color: white; 
  width: 100%;
  height: auto;
}

Answer 1

好吧，这其实很简单，抱歉打扰大家了。

我按如下方式更改了 style.css 文件:

#canvas1 {
  background-color: white; 
  width: 100%;
  height: auto;
}

因此它不会应用于所有 Canvas 元素，而是只应用于“canvas1”。