10.canvas

1.基础配置：

（1）固定语句：
         var canvas = document.getElementById("canvas1"); //定义画布
         var context = canvas.getContext("2d"); //设置绘图环境为2d
（2）设置canvas的样式
         context.lineWidth = 2; //线宽
         context.strokeStyle = "red"; //线的颜色

//template
<canvas id="canvas1" width="300px" height="150px" style="background: gray"></canvas>
//script
mounted() {
    this.fetch();
  },
methods: {
    fetch() {
      // 1.固定语句
      var canvas = document.getElementById("canvas1"); //定义变量canvas获取画布DOM
      var context = canvas.getContext("2d"); //设置绘图环境为2d
      // 2.设置canvas的样式
      context.lineWidth = 2; //线宽
      context.strokeStyle = "red"; //线的颜色
    },
},

 

2.利用canvas绘制矩形：

（1）关键代码：
         context.beginPath() //创建新的路径
         context.strokeRect(x,y,w,h) //绘制矩形
（2）如果是填充的话，将所有的stroke换成fill即可

//template
<canvas id="canvas1" width="450px" height="150px" style="background: gray"></canvas>
//script
mounted() {
    this.fetch();
  },
methods: {
    fetch() {
      var canvas = document.getElementById("canvas1");
      var context = canvas.getContext("2d");
      context.lineWidth = 2;
      context.strokeStyle = "red";

      // 方法一：通过坐标绘制矩形
      context.moveTo(0, 0); //起点坐标
      context.lineTo(100, 0); //中间点
      context.lineTo(100, 50);
      context.lineTo(0, 50);
      context.closePath(); //回到起点
      context.stroke(); //开始绘制（填充要换成fillStroke）
      
      // 方法二：先创建矩形，再开始绘制
      context.strokeStyle = "yellow";
      context.beginPath() 
      context.rect(150,0,100,50) 
      context.stroke() 
      
      // 方法三：直接绘制矩形
      context.strokeStyle = "blue";
      context.beginPath() 
      context.strokeRect(300,0,100,50) 

      // 填充（将所有的stroke换成fill即可）
      context.fillStyle = "red";
      context.beginPath(); 
      context.fillRect(0, 80, 100, 50); 
      context.fillStyle = "yellow";
    },
},

 

3.利用canvas绘制文字：

关键代码：context.strokeText("文字",x,y)

//template
<canvas id="canvas1" width="450px" height="150px" style="background: gray"></canvas>
//script
mounted() {
    this.fetch();
  },
methods: {
    fetch() {
      var canvas = document.getElementById("canvas1");
      var context = canvas.getContext("2d");
      context.lineWidth = 2;
      context.strokeStyle = "red";

      // 利用canvas绘制文字
      context.font="50px 隶书"
      context.strokeStyle="blue"
      context.strokeText('乘风破浪',100,50)
      
      // 填充（将所有的stroke换成fill即可）
      context.fillStyle="red"
      context.fillText('乘风破浪',100,100)
    },
},

 

4.利用canvas绘制圆弧和扇形：

（1）关键代码：
         context.arc(x,y,r,起始角度,结束角度,true逆时针/false顺时针);     //x圆心横坐标,y圆心纵坐标,r半径
         context.stroke();

//template
<canvas id="canvas1" width="450px" height="150px" style="background: gray"></canvas>
//script
mounted() {
    this.fetch();
  },
methods: {
    fetch() {
      var canvas = document.getElementById("canvas1");
      var context = canvas.getContext("2d");
      
      // 空心圆
      context.lineWidth = 2;
      context.strokeStyle = "red";
      context.beginPath();
      context.arc(100, 100, 50, 0, Math.PI * 2, true);
      context.stroke();
      // 实心圆
      context.fillStyle = "blue";
      context.beginPath();
      context.arc(220, 100, 50, 0, Math.PI * 2, true);
      context.fill();
      
      // 扇形
      context.fillStyle = "yellow";
      context.beginPath();
      context.moveTo(340, 120);
      context.arc(340, 120, 50, (Math.PI / 6) * 11, (Math.PI / 6) * 7, true);
      context.fill();

      context.fillStyle = "pink";
      context.beginPath();
      context.moveTo(340, 120);
      context.arc(340, 120, 25, (Math.PI / 6) * 11, (Math.PI / 6) * 7, true);
      context.fill();
      
      // 嘴巴
      context.fillStyle = "purple";
      context.beginPath();
      context.moveTo(460, 100);
      context.arc(460, 100, 50, 0, (Math.PI / 6) , true);
      context.fill();
    },
},

 

 

5.利用canvas绘制渐变色：

（1）线性渐变：
         var g1 = context.createLinearGradient(x1,y1,x2,y2);     //x1颜色渐变起始横坐标,y1颜色渐变起始纵坐标,x2颜色渐变终点横坐标,y2颜色渐变终点纵坐标
         g1.context.addColorStop(位置,'颜色值');     //位置：0表示起点，1表示终点
         context.fillStyle = g1;     //设置填充样式为g1
         context.fillRect(10, 10, 90, 90);     //按照g1的样式填充矩形
（2）放射性渐变：
         var g2 =context.createRadiaGradient(x,y,r1,x,y,r2);     //x圆心横坐标，y圆心纵坐标,r1内圆半径，r2外圆半径
         g2.context.addColorStop(位置,”颜色值”);
         context.fillStyle = g2;     //设置填充样式为g2
         context.arc(x, y, r2, 0, Math.PI * 2, true);     //绘制圆弧
         context.fill();     //按照g2的样式填充圆形

//template
<canvas id="canvas1" width="450px" height="150px" style="background: gray"></canvas>
//script
mounted() {
    this.fetch();
  },
methods: {
    fetch() {
      var canvas = document.getElementById("canvas1");
      var context = canvas.getContext("2d");
      
      // 线性渐变
      var g1 = context.createLinearGradient(10, 10, 100, 100); //创建线性渐变，颜色渐变的起始坐标和终点坐标
      g1.addColorStop(0, "red"); 
      g1.addColorStop(0.5, "yellow");
      g1.addColorStop(1, "green");
      context.fillStyle = g1;
      context.beginPath();
      context.fillRect(10, 10, 90, 90);
      
      // 放射性渐变
      var g2 = context.createRadialGradient(250, 60, 10, 250, 60, 45); //创建放射性渐变
      g2.addColorStop(0, "red");
      g2.addColorStop(0.5, "yellow");
      g2.addColorStop(1, "green");
      context.fillStyle = g2;
      context.beginPath();
      context.arc(250, 60, 45, 0, Math.PI * 2, true);
      context.fill();
    },
},