如何控制首先绘制哪个 Canvas 图层（JCanvas）答案

【问题标题】：How do I control which Canvas layer draws first (JCanvas)如何控制首先绘制哪个 Canvas 图层（JCanvas）
【发布时间】：2012-01-10 14:51:18
【问题描述】：

在下面的代码中，我有两个 Canvas 图层，一个文本和一个图像，我遇到的问题是控制哪个图层首先绘制。加载页面时，文本可能会在图像上方绘制或吹出，看起来很随机。有没有办法控制这种行为？

我的尝试：

{% extends "layout.html" %}
{% block body %}
<script>
    window.onload = function(){
            $("canvas").addLayer({
                method: "drawImage",
                source: '{{ url_for('static', filename='100MV-Floor-Plan.png') }}',
                x: 700, y: 300,
            })

            $("canvas").addLayer({
                    method: "drawText",
                    strokeStyle: "C35817",
                    x:{{ room.xPos }}, y: {{ room.yPos }},
                    text: '{{ room.room_id }}',
                    align: "center",
                    baseline: "middle"
            })

            $("canvas").getLayer(0);
            $("canvas").getLayer(1);
            $("canvas").drawLayers();
        }; 
</script>
<canvas width="1397" height="711"></canvas>
<h1>{{ room.current_user }}</h1> 
<form method=POST>
    Room ID: <input type="text" name="room_id"/><br />
    <input type="submit" value="Click" class="button">
</form>
{% endblock %}

【问题讨论】：

这不是烧瓶或 jinja2 问题，它是 javascript。
@FMR 只是想人们可能想知道为什么我在我的代码中引用了像 '{{ url_for('static', filename='100MV-Floor-Plan.png') }}' 这样的字符串。但我猜你是对的，标签已更新。
更新代码以解决与烧瓶无关的问题，这表示某些问题可以通过服务器端处理动态解决，但最好先提出完整的 javascript 解决方案。如果你没有找到一个纯 javascript，你可能会回到服务器端解决方案。

标签： jquery-plugins canvas html5-canvas jcanvas

【解决方案1】：

在返回并再次查看 jcanvas 文档后，我找到了解决方案。通过使用 drawImage() 的“加载”回调函数，我可以在加载图像后调用 drawText()。

更新代码：

 1 {% extends "layout.html" %}
 2 {% block body %}
 3     <script>
 4         window.onload = function(){
 5                 $("canvas").drawImage({
 6                     source: '{{ url_for('static', filename='100MV-Floor-Plan.png') }}',
 7                     x: 700, y: 300,
 8                     load: displayText
 9                 })
10
11                 function displayText() {
12                     $("canvas").drawText({
13                         strokeStyle: "C35817",
14                         x:{{ room.xPos }}, y: {{ room.yPos }},
15                         text: '{{ room.room_id }}',
16                         align: "center",
17                         baseline: "middle"
18                         });
19                 };
20             };
21     </script>
22     <canvas width="1397" height="711"></canvas>
23     <h1>{{ room.current_user }}</h1>
24     <form method=POST>
25         Room ID: <input type="text" name="room_id"/><br />
26         <input type="submit" value="Click" class="button">
27     </form>
28 {% endblock %}

【讨论】：

如果这解决了您的问题，您是否可以通过单击旁边的复选标记将其标记为解决方案？
看起来需要一定数量的代表点才能立即接受您自己的答案。它说我还有 12 个小时的时间。