Processing.js 无法在内部画布内绘制答案

【问题标题】：Processing.js unable to draw inside inner canvasProcessing.js 无法在内部画布内绘制
【发布时间】：2016-12-17 19:59:16
【问题描述】：

如果我将 canvas1 移出 holderCanvas，下面的代码可以正常工作。但是，我在这种安排中需要它，因为 holderCanvas 正在实现缩放和平移功能。

<html>
<head>
  <script src="processing.min.js"></script>
</head>
<body><h1>Processing.js</h1>
<h2>Simple processing.js via JavaScript</h2>
<p>Clock</p>

<canvas id="holderCanvas" width="200" height="200" style="opacity:0.1;background-color:red;">
  <canvas id="canvas1" width="200" height="200"></canvas>
</canvas>

<script id="script1" type="text/javascript">

// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
  // Override draw function, by default it will be called 60 times per second
  processing.draw = function() {
    // determine center and max clock arm length
    var centerX = processing.width / 2, centerY = processing.height / 2;
    var maxArmLength = Math.min(centerX, centerY);

    function drawArm(position, lengthScale, weight) {      
      processing.strokeWeight(weight);
      processing.line(centerX, centerY, 
        centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
        centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
    }

    // erase background
    processing.background(224);

    var now = new Date();

    // Moving hours arm by small increments
    var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
    drawArm(hoursPosition, 0.5, 5);

    // Moving minutes arm by small increments
    var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
    drawArm(minutesPosition, 0.80, 3);

    // Moving hour arm by second increments
    var secondsPosition = now.getSeconds() / 60;
    drawArm(secondsPosition, 0.90, 1);
  };

}

var canvas = document.getElementById("canvas1");
var p = new Processing(canvas, sketchProc);
</script>
</body>
</html>

我可以在外部画布上完成所有绘图。但是，为了维护模块化组件，我正在实施这种设计。请解释这是不是错误的方式。

【问题讨论】：

标签： canvas processing processing.js

【解决方案1】：

<canvas> 里面的内容是备用的，只有在浏览器不支持<canvas> 时才会显示。这就是canvas1 不会显示在这里的原因。

【讨论】：