在javascript中绘制画布上的播放按钮 - 圆圈中的三角形

Question

所以我为我创建了一个简单的用户脚本 - 我想在网站上的任何GIF图像的阴影版本上绘制一个播放按钮，让它们只在我想要的时候播放。

我鼓舞了自己here。为了使整个事情变得美好，我在动画上画了一个绿色圆圈。这是我的预期效果（我真的很想知道是否可以在GIMP中制作一些形状）：

这就是我现在所拥有的：

^{Cleese具有讽刺意味的脸部动画来自GIF portal}

我对我当前的GIF pauser userscript做了一个小提琴。

打印圆圈的关键代码：

//Assume these variables
var ctx = canvas context (2d)
var w = canvas width
var h = canvas height
//The code:
ctx.beginPath();
//I'm making sure the circle will always fit - therefore Math.min
ctx.arc(w/2, h/2, Math.min(60, w/2-20, h/2-20), 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(0,180,0,0.5)';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.closePath();

我希望很清楚，三角形必须始终适合圆圈（大小可能会有所不同）。它的垂直线必须比其他两条短一些，它们的长度必须相等。

我对任何现有的GIF暂停库都不感兴趣。请记住，问题是关于三角形，而不是GIF。

Answer 1

喜欢这个？ http://jsfiddle.net/32ECU/

//Draw a triangle in it
ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo(w/3, h/3);
ctx.lineTo(w/3, h-h/3);
ctx.lineTo(w-w/4, h/2);
ctx.lineTo(w/3, h/3);
ctx.fillStyle = 'white';
ctx.fill();