Question

目标

基本上我想做的是：

添加多个SVG向量（hand.svg和svg.get('name')）
将它们存储到单例对象中以后使用（以后无需定义SVG-可直接从head.svg
完成初始定义和存储后-随时可以在Canvas上绘制它们。

这里的主要思想是定义一次并使用存储在单例对象中的SVG多次绘制它们。

问题

在Mozilla Firefox（v61.0.2）中，它不显示任何内容
在Chrome中，它显示第一个SVG元素（hand.svg），但不显示第二个SVG元素（hand.svg）

[更新]

清除缓存并关闭两个浏览器后，当我重新打开项目页面时：

Mozilla Firefox仅显示第二个元素（head.svg），而不显示第一个元素（head.svg）
Chrome仅显示第一个元素（head.svg），但不显示第二个元素（// Game canvas var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Canvas fullscreen canvasFullscreen = function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Adapt fullscreen on resize window.onresize = function(event) { canvasFullscreen(); }; }; canvasFullscreen(); // SVG draw var svg = new function() { // The list of SVGs this.get = {}; // Create Image & add to list this.add = function(name, svg) { this.get[name] = new Image; this.get[name].src = svg; }; // Draw SVG in Canvas this.draw = function(name, svg, x, y, w, h) { // Check if previously defined / added to list if (typeof this.get[name] == 'undefined') { // If SVG file defined, add it to list if (svg !== false) this.add(name, svg); } // Draw image ctx.drawImage(this.get[name], x, y, w, h); }; } // Draw head svg.draw('head', 'https://richardev.com/public/head.svg', 30, 0, 50, 50); // Draw hand svg.draw('left_hand', 'https://richardev.com/public/hand.svg', 0, 12.5, 25, 25);）

CODE

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: none;
}

html,
body {
  overflow: hidden;
}

#window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#canvas {
  position: relative;
  z-index: 20;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Game</title>
</head>

<body>
  <section id="window">
    <canvas id="canvas" width="800" height="600"></canvas>
  </section>
</body>

</html>

CreateNewRandomString

这里可能是什么问题？预先感谢！

将SVG显示到HTML Canvas元素中的问题

目标

问题

CODE

0 个答案: