首页canvas画一个空心箭头

canvas画一个空心箭头

时间: 2023-10-26 22:35:04 浏览: 41

下面是用 HTML5 Canvas 画一个空心箭头的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas 空心箭头</title> <meta charset="utf-8"> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas id="myCanvas" width="400" height="300"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置箭头参数 var arrowWidth = 20; var arrowHeight = 40; var arrowX = canvas.width / 2; var arrowY = canvas.height / 2; // 画出箭头 ctx.beginPath(); ctx.moveTo(arrowX - arrowWidth / 2, arrowY + arrowHeight / 2); ctx.lineTo(arrowX, arrowY - arrowHeight / 2); ctx.lineTo(arrowX + arrowWidth / 2, arrowY + arrowHeight / 2); ctx.stroke(); </script> </body> </html> ``` 运行代码后，会在页面上显示一个空心箭头，如下图所示： ![空心箭头](https://img-blog.csdnimg.cn/20210903115958950.png)