canvas绘制三角形。已知三角形一点在圆心，另一点在圆形顶点，即12点那一点，最后一个点为圆弧上的任意一点。根据这三点画三角形：
<canvas id=”myCanvas” width=”200″ height=”200″ > 您的浏览器不支持canvas</canvas>
<script type=”text/javascript”>
function drawSanjiaoxing(x,y,r, end) {
var c = document.getElementById(“myCanvas”);
//绘制圆
var cxtbing = c.getContext(“2d”);
cxtbing.arc(x, y, r,0, 2 * Math.PI, false);
cxtbing.stroke();
//绘制三角形
var zhuanguohudu = end + 0.5 * Math.PI;//获取转过的弧度
var px, py;//定义转过一定弧度后的点坐标
if (zhuanguohudu >= 0 && zhuanguohudu <= 0.5 * Math.PI) {
px = x + Math.sin(zhuanguohudu) * r;
py = y – Math.cos(zhuanguohudu) * r;
} else if (zhuanguohudu > 0.5 * Math.PI && zhuanguohudu <= Math.PI) {
px = x + Math.sin(Math.PI – zhuanguohudu) * r;
py = y + Math.cos(Math.PI – zhuanguohudu) * r;
} else if (zhuanguohudu > Math.PI && zhuanguohudu <= 1.5 * Math.PI) {
px = x – Math.sin(zhuanguohudu – Math.PI) * r;
py = y + Math.cos(zhuanguohudu – Math.PI) * r;
} else if (zhuanguohudu > 1.5 * Math.PI && zhuanguohudu < 2 * Math.PI) {
px = x – Math.sin(2 * Math.PI – zhuanguohudu) * r;
py = y – Math.cos(2 * Math.PI – zhuanguohudu) * r;
}
var cxtline = c.getContext(“2d”);
cxtline.moveTo(x, y);
cxtline.lineTo(x, y-r);
cxtline.lineTo(px, py);
cxtline.lineTo(x, y);
cxtline.stroke();
}
drawSanjiaoxing (100,100,80, 0.2 * Math.PI);
</script>
计算用的草图。不过等都写完了才发现，这段代码是相当的鸡肋。。。没啥作用其实。。。
未经允许不得转载：前端撸码笔记 » canvas根据圆上的任意一点画三角形