无法在画布上绘制图像（）答案

【问题标题】：Can't drawImage() on Canvas无法在画布上绘制图像（）
【发布时间】：2016-11-12 02:08:52
【问题描述】：

我似乎无法渲染subsection of a PNG to an HTML canvas。我有一个画布 2D 上下文和一个预加载的图像，onload 我尝试在画布上绘制图像，但没有任何反应。我的浏览器控制台也没有错误。

(ns jump.core)

(enable-console-print!)

(defn screen
  ([]
     (screen "screen"))
  ([elem-id]
     (let [screen (.getElementById js/document elem-id)]
       {:context (.getContext screen "2d")
        :height (.-height screen)
        :width (.-width screen)})))

(defn draw-sprite
  [player screen]
  (let [ctx (:context screen)
        sprite (:image player)
        t (:top player)
        l (:left player)
        w (:width player)
        h (:height player)]
    (println ctx sprite l t w h 10 10 w h)
    (.drawImage ctx sprite l t w h 10 10 w h)))

(defn image
  [src]
  (let [img (new js/Image)]
    (set! (.-src img) src)
    img))

(def player
  {:image (image "sprites/player.png")
   :top 94
   :left 167
   :height 35
   :width 37
   :facing :right
   :falling false
   :jumping false})

(set! (.-onload js/window)
      (do
        (println "Window loaded")
        (println "player" player)
        (println "screen" (screen))
        (draw-sprite player (screen))))

完整代码见my github repo。

【问题讨论】：

标签： html canvas clojurescript

【解决方案1】：

您可能需要等到图像中的onload 触发，当您绘制它时它可能是空的，因为它还没有从服务器返回。

快速而丑陋的解决方案：

(defn init []
  (println "Window loaded")
  (println "player" player)
  (println "screen" (screen))
  (draw-sprite player (screen)))

(set! (.-onload js/window)
      #(set! (.-onload (:image player))
             init))

如果这是您可能需要一些代码来管理加载资源的问题！

另外，我注意到您正在将 do 表达式的结果分配给 window.onload。您可能想分配一个匿名函数：

(set! (.-onload js/window)
      #(do
        (println "Window loaded")
        (println "player" player)
        (println "screen" (screen))
        (draw-sprite player (screen))))

【讨论】：

谢谢，我今天把它拆开并写出 JS 版本让它工作，然后再用 CLJS 挠头。我最终在 JS 版本中使用了img.onload = func() {};。明天我会试试你的建议。
我没有忘记这一点，只是还没来得及实施它。

【解决方案2】：

对于以后发现此问题的人，这是我的解决方案。我选择使用Base64 图像编码，以便在画布尝试绘制图像时正确加载图像。

首先我获取要绘制图像的画布：

(defn canvas
  "gets a canvas with a certain id"
  [id]
  (.getElementById js/document id))

然后我检索该画布的上下文。

(defn context-2d
  "gets the 2d context of a canvas with an id"
  [id]
  (let [canvas-elem (canvas id)]
    (.getContext canvas-elem "2d")))

接下来，我得到合适的图像。 data 对应Base64 图像编码字符串。

((defn get-img
  "retrieves an image with data"
  [data]
  (let [img (js/Image.)]
    (set! (.-src img) data)
    img))

最后，我将上一步中的图像绘制到上下文中。

(defn draw-image
  "draws the image"
  [ctx img x y width height]
  (.drawImage ctx img x y width height))

【讨论】：