滚动到的时绘制Canvas Diamond Shape的动画

Question

我试图用画布在屏幕上绘制这个形状。

我引用了这个绘制圆圈的示例：http://jsfiddle.net/loktar/uhVj6/4/，但无法弄明白。任何帮助将不胜感激。我是画布的新手。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 85;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';


function animate(current) {
 context.clearRect(0, 0, canvas.width, canvas.height);
 context.beginPath();
 context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
 context.stroke();
 curPerc++;
 if (curPerc < endPercent) {
     requestAnimationFrame(function () {
         animate(curPerc / 100)
     });
 }
}

animate();

我计划在每个角度都有一个子弹点，当线到达那个点时会弹出并略微停顿。