canvas学习笔记|基础学习资料

canvas学习笔记

画基本图形

1.矩形

  const canvas = document.getElementById('canvas');//画布
        if (canvas.getContext) {
          // alert("ok");
          const ctx = canvas.getContext('2d');//画笔
          ctx.fillStyle = 'rgb(200,0,0)';//填充样式
          ctx.fillRect(0, 0, 300, 50);//起始坐标X,Y 宽度 高度
          ctx.fillStyle = 'rgb(0,200,0)';
          ctx.strokeRect(0, 0, 300, 80);
          ctx.fillStyle = 'rgb(0,0,200)';
          ctx.clearRect(0, 70, 300, 30);
        }

2. 三角形

const canvas = document.getElementById('canvas');
        if (canvas.getContext) {
          // alert("ok");
          const ctx = canvas.getContext('2d');
          ctx.beginPath(); // 开始绘画
          ctx.moveTo(25, 25); 起始点
          ctx.lineTo(50, 50);
          ctx.lineTo(25, 50);
          ctx.fill();//封闭填充

          ctx.beginPath();
          ctx.moveTo(50, 50);
          ctx.lineTo(75, 50);
          ctx.lineTo(75, 25);
          ctx.closePath();
          ctx.stroke();//画边框
        }

3. 画圆

const canvas = document.getElementById('canvas');
        if (canvas.getContext) {
          // alert("ok");
          const ctx = canvas.getContext('2d');
          ctx.strokeStyle = 'Orange';
          ctx.lineWidth = 10;
          ctx.arc(400, 300, 150, 0, Math.PI*2, true);// 圆心(x,y) 半径 开始角度 结束角度 顺时针/逆时针
          ctx.stroke();
      }

文字

  const canvas = document.getElementById('canvas');
        if (canvas.getContext) {
          // alert("ok");
          const ctx = canvas.getContext('2d');
          var lingrad = ctx.createLinearGradient(100,200,500,200); // 渐变色大小 起始坐标，宽度高度
          lingrad.addColorStop(0.5, '#cc6677') // 0-50%的时候颜色
          lingrad.addColorStop(1, '#000')//50%-100%的时候颜色
          ctx.shadowColor = 'Orange'//阴影
          ctx.shadowBlur = 10;
          ctx.shadowOffsetX = 20;
          ctx.shadowOffsetY = 20;
          ctx.font = "bold italic 160px arial";//font weight,style,size, family 
          ctx.fillStyle = lingrad;
          ctx.fillText("Hello", 100, 200);//起始x轴 Y轴

画图

1.原始方法

  const canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        // alert("ok");
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = "路径.jpg"；
        // 绘制图片时一定要先加载
        img.onload = function() {
          const ptrn = ctx.createPattern(img, 'repeat');
          ctx.fillStyle = ptrn;
          ctx.fillRect(0,0, 800, 600);
        }
    }

2.常用方法

const canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        // alert("ok");
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = "路径.jpg"；
        // 绘制图片时一定要先加载
        img.onload = function() {
          /**
          1.图象
          2.x轴
          3.y轴
          4.宽度
          5.高度
          6.绘制x轴（以下裁剪使用）
          7.绘制y轴
          8.绘制宽度
          9.绘制高度
          */
          ctx.drawImage(this, 0,0, 120, 100, 150, 50, 100, 50);
        }

3. 图片上写字

  const canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        // alert("ok");
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = "路径.jpg"；
        // 绘制图片时一定要先加载
        img.onload = function() {
          ctx.drawImage(this, 0, 0);
          ctx.strokeStyle = 'rgb(0,0,0)';
          ctx.font='10 Arial';
          ctx.strokeText('Test Text', 176, 120);// 文字的起始位置
          ctx.stroke();
        }
    }

4.切圆 （Avatar）

const canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        // alert("ok");
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = "路径.jpg"；
        // 绘制图片时一定要先加载
        img.onload = function() {
          ctx.beginPath();
          ctx.arc(400, 300, 150, 0, Math.PI*2);
          ctx.fill();
          ctx.clip();
          ctx.drawImage(this, 80, 100);
        }

事件

1.画图板

const canvas = document.getElementById('canvas');
if (canvas.getContext) {
  // alert("ok");
  const ctx = canvas.getContext('2d');
  canvas.onmousedown = function (e) {
    var ev = e || window.event;
    var x = ev.clientX - canvas.offsetLeft;
    var y = ev.clientY - canvas.offsetTop;
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(x, y);
    
    canvas.onmousemove = function (e) {
      var ev = e || window.event;
      var x = ev.clientX - canvas.offsetLeft;
      var y = ev.clientY - ev.offsetTop;
      ctx.lineTo(x, y);
      ctx.stroke();
    }
    
    canvas.onmouseup = function () {
      canvas.onmousemove = "";
    }
  }

2. 刮刮卡

const canvas = document.getElementById('canvas');
if (canvas.getContext) {
  // alert("ok");
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'gray';
  ctx. fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'destination-out';
  ctx.lineWidth = 20;
  ctx.lineCap = 'round';
  
  canvas.onmousedown = function (e) {
    var ev = e || window.event;
    var x = ev.clientX - canvas.offsetLeft;
    var y = ev.clientY - canvas.offsetTop;
    ctx.moveTo(x, y);

    canvas.onmousemove = function (e) {
      var ev = e || window.event;
      var x = ev.clientX;
      var y = ev.clientY;
      ctx.lineTo(x, y);
      ctx.stroke();
    };
    

    canvas.onmouseup = function () {
      canvas.onmousemove = "";
    }
  }