0
canvas1 바깥쪽으로 이동하면 아래 코드는 잘 작동합니다. holderCanvas. 그러나 holderCanvas가 확대/축소 및 팬 기능을 구현 중이기 때문에이 정렬에서 필요합니다.Processing.js 내부 캔버스 내부를 그릴 수 없습니다.
<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>
나는 외부 캔버스에 모든 드로잉을 할 수 있습니다. 그러나 모듈 형 구성 요소를 유지하려면이 디자인을 구현해야합니다. 이것이 잘못된 방법인지 설명해주십시오.