Question

我有两个canvas元素（canvas1和canvas2）。 “ canvas1”应该调整大小以适合窗口，这是可行的。但是，“ canvas2”的大小应保持固定。这是行不通的，因为此画布还在调整大小以适合窗口。如何更改我的代码以获得理想的结果？

我有以下（简化的）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;
}

因此，不应用于所有画布元素，它仅应用于“ canvas1”。

画布1应该调整为窗口大小，画布2应该固定为大小

1 个答案: