谁能解释这个模拟时钟代码

时间:2018-04-15 19:33:33

标签: javascript canvas clock

除了如何绘制时钟数字外,我理解了所有内容。请解释drawNumbers()功能。这个例子来自w3schools.com,他们没有解释这些事情。



    <!DOCTYPE html>
    <html>
        <body>
            <canvas id="canvas" width="400" height="400"
                style="background-color:#333">
            </canvas>
            <script>
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                var radius = canvas.height / 2;
                ctx.translate(radius, radius);
                radius = radius * 0.90
                drawClock();
                
                function drawClock() {
                  drawFace(ctx, radius);
                  drawNumbers(ctx, radius);
                }
                
                function drawNumbers(ctx, radius) {
                  var ang;
                  var num;
                  ctx.font = radius*0.15 + "px arial";
                  ctx.textBaseline="middle";
                  ctx.textAlign="center";
                  for(num = 1; num < 13; num++){
                    // please explain from here
                    ang = num * Math.PI / 6;
                    ctx.rotate(ang);
                    ctx.translate(0, -radius*0.85);
                    ctx.rotate(-ang);
                    ctx.fillText(num.toString(), 0, 0);
                    ctx.rotate(ang);
                    ctx.translate(0, radius*0.85);
                    ctx.rotate(-ang);
                  }
                }
            </script>
        </body>
    </html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我很好地理解代码可以在不同的执行动作之间添加文本(如下所示)。如果你全部绘制它并不易读,但你可以逐一评论/取消评论,看看每个步骤中当前位置的位置。

编辑:我还根据我的理解添加了评论。

&#13;
&#13;
<canvas id="canvas" width="400" height="400" style="background-color:#333">
        </canvas>
&#13;
RapidMiner.setExecutionMode(RapidMiner.ExecutionMode.COMMAND_LINE);
RapidMiner.init();
Process pr = new Process(new File("C:\\Users\\Ameer Abdullah\\.RapidMiner\\repositories\\Local Repository\\naivebayesmodel.rmp"));
Operator op = pr.getOperator("Apply Model");
op.setParameter( );             //here I want to change parameter for unlabelled data input port          
pr.run();
&#13;
&#13;
&#13;

文档

CanvasRenderingContext2D.translate()

CanvasRenderingContext2D.rotate()