背景Quil canvas应用程序前面的文本

Question

我已经写了一个Clojurescript Quil网页应用程序，它由漂浮在周围的对象组成。此“游戏”旨在作为普通html文本的背景。Quil具有文本功能，但我还没有找到任何我需要做的示例。理想情况下，我希望有网页上的文字渲染在游戏上面的一层，使用像Sablono的东西，而不必担心透明度问题，或任何其他问题-游戏只是在后台！

如果不能简单地将Quil放在下面的一层上，那么我相当确定我可以在Quil中做到这一点，但有很多细节需要解决:Z排序，让文本保持颜色不变，让包含字符的矩形的背景是透明的，等等-许多我想要避免的问题。

在此设置下，在画布层上创建html文本层的最简单方法是什么？

下面是我到目前为止想出的方法，在动画之后，在与动画相同的函数中绘制文本。不完全是我想要的，而是可能要做的：

(ns scratch.core
  (:require [quil.core :as q :include-macros true]
            [quil.middleware :as m]))

(def dark-blue [0,0,139])

(defn setup []
  (q/text-font (q/create-font "DejaVu Sans" 28 true))
  (q/frame-rate 15)
  ; Set color mode to HSB (HSV) instead of default RGB.
  ;(q/color-mode :hsb)
  ; setup function returns initial state. It contains
  ; circle color and position.
  {:color 0
   :angle 0})

(defn draw-text
  []
  (apply q/fill dark-blue)
  (q/text "The quick, brown fox jumped over the lazy dog"
          100 200 300 200))

(defn update-state [state]
  ; Update sketch state by changing circle color and position.
  {:color (mod (+ (:color state) 0.7) 255)
   :angle (+ (:angle state) 0.1)})

(defn draw-state [state]
  ; Clear the sketch by filling it with light-grey color.
  (q/background 240)
  ; Set circle color.
  (q/fill (:color state) 255 255)
  ; Calculate x and y coordinates of the circle.
  (let [angle (:angle state)
        x (* 150 (* 0.4 (q/cos angle)))
        y (* 150 (* 0.4 (q/sin angle)))]
    ; Move origin point to the center of the sketch.
    (q/with-translation [(/ (q/width) 2)
                         (/ (q/height) 2)]
      ; Draw the circle.
      (q/ellipse x y 100 100)))
  ;; Simply make sure the text is drawn after the 'background'
  (draw-text))

(q/defsketch moving-ball
  :host "moving-ball"
  :size [500 500]
  :setup setup
  :update update-state
  :draw draw-state
  :middleware [m/fun-mode])  

Answer 1

这个问题在某种程度上回答了elsewhere。然而，问题中使用的变通方法-在画布上绘制文本-可能对我的用例足够好了。