canvas画布上平铺图片&&绘制文本-CFANZ编程社区

canvas画布上平铺图片&&绘制文本

1️⃣知识点①：如何在canvas画布上平铺图片：

⚠️知识点实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>画图像</title>
    <style type="text/css">
      #c{
        border: 1px solid black;
      }
    </style>
  </head>
  <body>

    <canvas id="c" width="1078" height="1881"></canvas>

  </body>
  <script type="text/javascript">
    var c = document.getElementById("c");
    var jb = c.getContext("2d");

    // 创建一个图片对象
    var  img = new Image();
    // 指定图片的内容
    img.src = 'img/1.jpg';        // 值为图片路径

    // 注意：图片不能直接放canvas上，需要通过事件.onload加载，不然图片可能因为没有加载完成而未出现在画布
    img.onload = function(){
      // 参数：图片，起始x坐标，起始y坐标，后两个参数指定大小（建议尺寸的比例和原图比例匹配）
      // 后两个参数如果不指定，默认会按原图1:1绘制，显示不下的内容不再显示
      jb.drawImage(this,0,0,1078,1881)
      // 200,200,300,300决定裁剪图片左上到右下区域；后面四个坐标表示所画区域的左上右下坐标
      //jb.drawImage(this,200,200,300,300,0,0,1078,1881)
    }


  </script>
</html>

⚠️实现效果：

canvas画布上平铺图片&&绘制文本_html5

1️⃣知识点②：如何在canvas画布上绘制文本（实心文本＋空心文本）：

⚠️知识点实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>绘制文字</title>
    <style type="text/css">
      #c{
        border: 5px solid blue;
      }
    </style>
  </head>
  <body>
    <canvas id="c" width="1200" height="700"></canvas>
  </body>

  <script type="text/javascript">
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");

    // 参数：正常字体/斜体  字号  微软雅黑/仿宋             normal:正常字体/italic：斜体
    ctx.font = "normal 100px 仿宋";   

        //ctx.strokeStyle = "red";     // 字体轮廓颜色
    var jb = ctx.createLinearGradient(0,0,1200,0);   // 字体轮廓渐变色
    jb.addColorStop(0,"red");
    jb.addColorStop(0.2,"blue");
    jb.addColorStop(0.4,"orange");
    jb.addColorStop(0.6,"green");
    jb.addColorStop(0.8,"cyan");
    jb.addColorStop(1,"yellow");
    ctx.strokeStyle = jb;
    // 绘制文本(空心)          参数：文本，左上角x坐标，左上角y坐标，最大显示字符宽
      ctx.strokeText("Hello,World!",100,100);   

    // 绘制文本(实心)
    ctx.fillStyle = jb;   // 使用渐变色
    ctx.fillText("Hello,World!",100,200);


  </script>
</html>