Canvas学习笔记之五：插入图片和添加文字

最新推荐文章于 2024-08-05 01:48:07 发布

九段刀客

最新推荐文章于 2024-08-05 01:48:07 发布

阅读量4k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_35958891/article/details/104089334

版权

js 专栏收录该内容

56 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #test {
      box-shadow: 0 0 10px #333;
    }
  </style>
</head>
<body>
  <canvas id="test" width="500" height="400"></canvas>
  <script>
    //画布
    let canvas = document.getElementById('test');
    // 画笔
    let ctx = canvas.getContext('2d');

    let img = new Image();
    img.src = './img/2.gif';

    img.onload = function(){
      // 方法一
      // let ptrn = ctx.createPattern(img,'repeat');
      // ctx.fillStyle = ptrn;
      // ctx.fillRect(0,0,500,300);

      // 方法二
      ctx.drawImage(this,0,0,500,500);

      // 添加文字
      ctx.font = '10 Arial';
      ctx.strokeStyle = 'rgb(0,233,0)';
      ctx.strokeText('九段刀客',100,100);
    }
    
  </script>
</body>
</html>