如何在html5畫布極地時鍾中添加箭頭

Question

在以下文檔的幫助下，我在畫布上制作了一個極地時鍾。

帆布極地時鍾由 HenrikJoreteg

我已經實現了我所需要的，除了每個圓圈尖端的箭頭，如圖像中的箭頭

我如何在每個旋轉圓上添加這些箭頭？

 function clock(){ // get current time from client var now = new Date(); // get 2D context from the canvas element var ctx = document.getElementById('clockCanvas').getContext('2d'); // You'll see a save and restore all over the place. These are because we // are redrawing the entire image every time, so we have to save the existing // state of the canvas and then add our other shape and then restore what we // saved. ctx.save(); ctx.clearRect(0,0,800,800); ctx.translate(400,300); ctx.scale(2,2); // this rotates the canvas so that the arcs we draw will start at the middle // top rather than horizontally. ctx.rotate(-Math.PI/2); // sets the width of all lines we're going to draw ctx.lineWidth = 18; // gives our lines a rounded edge. // it also supports "butt" and "square" ctx.lineCap = "round"; // I wanted to get a smooth movement so I'm basing all time measurments off // of the millisecond and building partial seconds and minutes by adding the // smaller increment to the larger one. For example getting current millisecond // count and adding that to the current second to build a partial second. var milliSec = now.getMilliseconds(); var sec = now.getSeconds(); sec = milliSec/1000+sec; var min = now.getMinutes(); min = sec/60 + min; // this is a 24 hour clock var hr = now.getHours(); // if you uncomment the following line, it'd become a 12 hour clock. // hr = hr>=12 ? hr-12 : hr; hr = min/60 + hr; var dow = now.getDay() + 1; var day = now.getDate(); var month = now.getMonth() + 1; // turn times into percentages var secPer = sec/60; var minPer = min/60; // if you wanted a 12 hour clock, you'd have to change this to 12 too. var hrPer = hr/24; var dowPer = dow/7; var monthPer = month/12; var dayPer = 0; // handles the fact that there are different amount of total days in different months if (month == 2){ dayPer = day/29; } else if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){ dayPer = day/31; } else { dayPer = day/30; } // call the functions that draw each arc and pass in the radius of the circle we want // and the calculated percentages from above. writeTime(ctx,40,monthPer); writeTime(ctx,60,dayPer); writeTime(ctx,80,dowPer); writeTime(ctx,100,hrPer); writeTime(ctx,120,minPer); writeTime(ctx,140,secPer); ctx.restore(); } // draws arcs and sets color based on percentages function writeTime(ctx,radius,per){ ctx.save(); ctx.strokeStyle = calculateColor(per); ctx.beginPath(); partialCircle(ctx,0,0,radius,per); ctx.stroke(); ctx.restore(); } // turns a percentage into an RGB color string function calculateColor(per){ var brightness = 255; var red = 0; var green = 0; var blue = 0; blue = per * brightness; green = brightness - blue; result = 'rgba('+ Math.round(red) + ',' + Math.round(green) + ',' + Math.round(blue) + ',1)'; return result; } // helper function for partial circles function partialCircle(ctx,x,y,rad,percentage){ ctx.arc(x,y,rad,0,percentage*(Math.PI*2),false); return ctx; } // call the function repeatedly. 66 is the equivalent of about 15 frames per second // this seemed enough to make the animation look smooth look without overdoing it. setInterval(clock,66);

 <p><canvas id="clockCanvas" height="600" width="800" style="border:1px solid blue;"></canvas></p>

Answer 1

這是沿弧線繪制箭頭的快速方法：

1. 使用三角函數計算箭頭的 [x,y]，
2. context.translate到那個 x,y,
3. context.rotate到極坐標時鍾的當前角度，
4. 使用路徑繪制命令繪制箭頭。

示例代碼和演示：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var cx=150; var cy=150; var radius=100; var angle=0; requestAnimationFrame(animation); function drawArrow(cx,cy,radius,radianAngle){ var x=cx+radius*Math.cos(radianAngle); var y=cy+radius*Math.sin(radianAngle); ctx.translate(x,y); ctx.rotate(angle); ctx.beginPath(); ctx.moveTo(-10,-10); ctx.lineTo(0,0); ctx.lineTo(10,-10); ctx.stroke(); ctx.setTransform(1,0,0,1,0,0); } function animation(time){ ctx.clearRect(0,0,cw,ch); drawArrow(cx,cy,radius,angle); angle+=(Math.PI/120); requestAnimationFrame(animation); }

 body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; }

 <canvas id="canvas" width=300 height=300></canvas>