html5中使用canvas绘制两点弧线箭头 10
1个回答
展开全部
回答完毕，采纳即可。
<!DOCTYPE HTML>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
</style>
<script type="text/javascript">
var Eye = function (a, b)
{
this.a = a;
this.b = b;
}
Eye.prototype =
{
constructor : Eye,
g : null,
init : function ()
{
var canvas = document.querySelector ("canvas");
this.g = canvas.getContext ("2d");
return this;
},
drawEyelid : function ()
{
var g = this.g, a = this.a, b = this.b, R = 5;
g.save ();
g.beginPath ();
g.fillStyle = "black";
g.arc (a.x, a.y, R, 0, 2 * Math.PI);
g.fill ();
g.restore ();
g.beginPath ();
g.fillStyle = "red";
g.arc (b.x, b.y, R, 0, 2 * Math.PI);
g.fill ();
g.restore ();
g.beginPath ();
g.strokeStyle = "blue";
g.moveTo (a.x, a.y);
g.lineTo (a.x, a.y);
var r = 300;
g.arcTo (a.x + r, a.y, b.x, b.y, r);
g.lineTo (b.x, b.y);
g.stroke ();
g.restore ();
g.beginPath ();
g.strokeStyle = "pink";
g.moveTo (b.x, b.y);
g.lineTo (b.x, b.y);
g.arcTo (b.x - r, b.y, a.x, a.y, r);
g.lineTo (a.x, a.y);
g.stroke ();
g.restore ();
g.beginPath ();
g.fillStyle = "black";
g.moveTo (b.x, b.y);
g.lineTo (b.x, b.y - 2 * R);
g.lineTo (b.x - 2 * R, b.y - 4);
g.fill ();
g.restore ();
g.beginPath ();
g.moveTo (a.x, a.y);
g.lineTo (a.x, a.y + 2 * R);
g.lineTo (a.x + 2 * R, a.y + 4);
g.fill ();
g.restore ();
}
};
onload = function ()
{
var eye = new Eye (
{
x : 100,
y : 50
},
{
x : 550,
y : 310
});
eye.init ().drawEyelid ();
}
</script>
</head>
<body>
<body>
<canvas width="800" height="600">
你的浏览器不支持canvas标签
</canvas>
</body>
</html>
追问
随意更改A，B两点后，箭头方向失效，可否再优化下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
东莞大凡
2024-08-07 广告
作为东莞市大凡光学科技有限公司的一员，我们深知Matlab圆点标定板在相机标定中的重要性。该标定板通过均匀分布的圆点，帮助精确计算相机参数，优化成像效果。Matlab强大的编程功能，使得我们能够灵活设计标定板，调整圆点大小、数量和分布，以满...
点击进入详情页
本回答由东莞大凡提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
