<templete>
  <div>
    <canvas id="my-canvas" width="400" height="400">
    //注意：給canvas設(shè)置寬高是不用帶單位的，以像素為單位
  </div>
</templete>
<script>
export default {
  mounted() {//注意要在DOM元素渲染完后才能操作DOM
    this.draw();
  },
  methods: {
    draw() {
      let canvas = document.getElementById('my-canvas');//獲取畫布
      let ctx = canvas.getContext('2d');//獲取畫筆
      //之后的操作都是基于ctx
}
</script>

ctx.fill();//用粗的毛筆填充
ctx.stroke()；//用細(xì)的鉛筆描邊

ctx.fillStyle = 'red'
ctx.strokrStyle = 'blue'

ctx.beginPath();//新建一條繪制路徑
ctx.moveTo(10, 10);//起點(diǎn)
ctx.lineTo(60, 10);//向x軸延申10個(gè)像素
ctx.lineTo(60, 60);//向y軸延申10個(gè)像素
ctx.closePath();//關(guān)閉當(dāng)前路徑
ctx.strokeStyle = 'red';//設(shè)置畫筆顏色
ctx.stroke();//以描邊的方式把描點(diǎn)的位置鏈接起來(lái)
//填充方式畫三角形
//ctx.fillStyle = 'blue';//設(shè)置顏色
//ctx.fill();//以填充的方式把描點(diǎn)的位置鏈接起來(lái)

fillRect(x,y,width,height);//填充一個(gè)矩形
strokeRect(x,y,width,height);//描邊一個(gè)矩形
//參數(shù)x,y是起點(diǎn)
//例子
ctx.fillRect(10,10,50,50);//填充一個(gè)矩形
ctx.strokeRect(70,10,50,50);//描邊一個(gè)矩形
//默認(rèn)顏色為黑色，可通過(guò)fillStyle/strokeStyle改顏色

arc(x, y, r, startAngle, endAngle, direction)
//x,y為圓心，r為半徑，startAngle、endAngle分別代表開始角度和結(jié)束角度，direction代表方向，true為順時(shí)針，false為逆時(shí)針，不填默認(rèn)為true
//例子
ctx.arc(100,100,20,0,2*Math.PI);
ctx.stroke();//以描邊方式將點(diǎn)連接起來(lái)

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
ctx.moveTo(135, 100);//重新設(shè)置畫筆起點(diǎn)
ctx.arc(100, 100, 35, 0, Math.PI, false);
ctx.moveTo(90, 85);
ctx.arc(85, 85, 5, 0, 2 * Math.PI, true);
ctx.moveTo(120, 85);
ctx.arc(115, 85, 5, 0, 2 * Math.PI, true);
ctx.stroke();

fillText('文本',x,y,maxWidth);//x,y為文本繪制開始位置，maxWidth為最大寬度（可選參數(shù)）
strokeText('文本',x,y,maxWidth);
font ='';//設(shè)置字體大小和字體樣式 
//例子
ctx.font = '32px serif'
ctx.fillText('任嘉倫最帥',10,50)
ctx.strokeText('任國(guó)超也帥',10,100)

ctx.drawImage(image, x, y,width,height)//image可以是img元素或Image構(gòu)造函數(shù)創(chuàng)建的屏幕外圖片對(duì)象，x,y為繪制的起始位置

//場(chǎng)景一
<template>
  <div class="wrap-box">
    <div class="canvas-content">
      <canvas id="my-canvas" width="300" height="300"></canvas>
    </div>
    <div class="img-content">
      <img src="../../assets/rjl.jpg" alt="" class="my-img">
    </div>
  </div>
</template>
<script>
export default {
  mounted(){
    this.drawPic()
  },
  methods:{
    drawPic(){
      //場(chǎng)景一
      let canvas = document.getElementById("my-canvas");
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.my-img');
      img.onload=function(){//為確保圖片資源加載完畢，需要在onload方法里繪制
        ctx.drawImage(img,0,0,200,300);
      }
    }
  }
}
</script>
<style scoped>
.wrap-box{
  display: flex;
  align-items: center;
  padding:20px 0 0 50px;
}
#my-canvas{
  border: 1px solid orange;
}
.img-content{
  flex: 1;
}
.my-img{
  width: 200px;
  height: 300px;
}
</style>

//場(chǎng)景二關(guān)鍵代碼
<script>
export default {
  mounted(){
    this.drawPic()
  },
  methods:{
    drawPic(){
      //場(chǎng)景二
      let img = new Image();//創(chuàng)建一個(gè)Image對(duì)象
      img.src="xxx.png";//假設(shè)xxx.png是獲取的scr參數(shù)
      img.onload = function(){//切記要在onload方法里繪制
        ctx.drawImage(img,150,100,200,300);
      }
    }
  }
}
</script>