canvas初识(一)

编写文本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas编写文本</title>
    <style type="text/css">
      canvas {
        border: 1px solid black;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <!-- canvas有兼容性问题,标签不识别时会读取里面内容 -->
    <canvas
      id="myCanvas"
      width="500"
      height="500"
      style="border:1px solid #000000;"
    >对不起，你的浏览器版本过低，点击<a href="#">下载</a>
    </canvas>
  </body>
  <script>
    window.onload = function() {
      var c = document.getElementById("myCanvas");
      //console.log(c);
      var ctx = c.getContext("2d");
      //绘制字体
      ctx.font = "30px Arial";
      //绘制空心字
      ctx.strokeText("年少的欢喜是你", 50, 100);
      //绘制实心字
      ctx.fillStyle = "dimgray";
      ctx.fillText("你是喜欢的少年", 50, 230);
    };
  </script>
</html>
//注意点:谷歌浏览器要加载完之后才能使用canvas,所以js要写在window.function(){}中

绘制图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas图片</title>
    <style type="text/css">
      canvas {
        /* border: 1px solid black; */
      }
    </style>
  </head>
  <body>
    <!-- canvas有兼容性问题,标签不识别时会读取里面内容 -->
    <canvas id="myCanvas" width="500" height="500">对不起，你的浏览器版本过低，点击<a href="#">下载</a></canvas>
    <img
      style="display:none;"
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547028784732&di=77ff5804bf424d6d0cb0c175b2ff7f91&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Fface%2F0f27137c1993f1a4034bb83349fb65601b7b420e.jpg"
      alt=""
    />
    <img style="display:none;" src="./images/timg.png" alt="" />
  </body>
  <script>
    window.onload = function() {
      var imgUrl = document.getElementsByTagName("img")[0].src;
      var c = document.getElementById("myCanvas");
      //   console.log(c);
      var ctx = c.getContext("2d");
      // var img = new Image();
      // img.onload = function() {
      //   //图片平铺
      //   for (var i = 0; i < 4; i++) {
      //     for (var j = 0; j < 3; j++) {
      //       ctx.drawImage(img, j * 150, i * 150, 150, 150);
      //     }
      //   }
      // };
      // img.src = imgUrl;
      
      //相框制作:有层级关系,后画的图片在最上层
      // 相框
      ctx.drawImage(document.getElementsByTagName("img")[1], 0, 0,500,500);
      // 照片
      ctx.drawImage(document.getElementsByTagName("img")[0], 130, 150, 250, 250);      
    };
	//ctx.drawImage(所需绘制的图片, 图片在画布中的位置X, 图片在画布中的位置Y); //三个参数即可,可默认图片大小为绘制大小
    //ctx.drawImage(所需绘制的图片, 图片在画布中的位置X, 图片在画布中的位置Y, 绘制大小width, 绘制大小height);
    //ctx.drawImage(所需绘制的图片, 图片在画布中的位置X, 图片在画布中的位置Y, 绘制大小width, 绘制大小height, 图片裁剪起始位置X, 图片裁剪起始位置Y, 裁剪图片的宽度,裁剪图片的高度);//图片裁剪时使用
  </script>
</html>

编写文本

绘制图片

猜你喜欢