Question

如果我移出 holderCanvas 之外的 canvas1 ，下面的代码可以正常工作。但是，我在这种安排中需要它，因为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>

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

Answer 1

hiveContext.sql("create temporary table TestTable (RunId string, Test1 string, Test2 string)") hiveContext.sql("insert into table TestTable select 'A', 'x1', 'y1'") hiveContext.sql("insert into table TestTable (RunId, Test1, Test2) select 'B', 'x2' as Blurb, 'y2' as Test1") hiveContext.sql("insert into table TestTable (RunId, Test2, Test1) select 'C', 'x3' as Blurb, 'y3' as Test1") data = hiveContext.sql("select 'xxx' as Test1, 'yyy' as Test2")) data.registerTempTable("Dummy") hiveContext.sql("insert into table TestTable(Test1, RunId, Test2) select Test1, 'D', Test2 from Dummy") hiveContext.sql("insert into table TestTable select Test1, 'E', Test2 from Dummy") hiveContext.sql("select * from TestTable").show(20)内的内容用于后备，只有在浏览器不支持<canvas>时才会显示。这就是为什么<canvas>不会显示在这里的原因。

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

1 个答案: