canvas 画箭头

最新推荐文章于 2024-08-10 09:38:57 发布

青春的小白

最新推荐文章于 2024-08-10 09:38:57 发布

阅读量1.2k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/bryBLOG/article/details/78523715

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最后的效果:
这里写图片描述
源码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <canvas id="bry" width="400" height="200"></canvas>
    <script>
      var bg = document.getElementById('bry');
      var ctx = bg.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(0,60);
      ctx.lineTo(100,60);
      ctx.lineTo(100,40);
      ctx.lineTo(130,75);
      ctx.lineTo(100,110);
      ctx.lineTo(100,90);
      ctx.lineTo(0,90);

      var grd = ctx.createLinearGradient(0,0,100,0);
      grd.addColorStop(0,'#fff');
      grd.addColorStop(1,'#4ce8b2');
      ctx.fillStyle = grd;
      ctx.fill();

      ctx.strokeStyle = '#000';
      ctx.font = '14px 宋体';
      ctx.strokeText('brytest',20,80);
    </script>
</body>
</html>