使用canvas之趣味制作（三）八卦图

如何插入一段漂亮的代码片

//wxml
<canvas type="2d" id="tiJi" width="200" height="200" style="border:2rpx solid #c3c3c3;margin:100rpx auto;"></canvas>


//js
Page({
  onLoad() {
   //三、太极
    const quaryTai = wx.createSelectorQuery()
    quaryTai.select('#tiJi').fields({node:true,size:true}).exec(res=>{
       const canvas = res[0].node
       const ctx = canvas.getContext('2d')
       //白色整个圆、黑色大半圆、黑色小半圆、白色小半圆
       ctx.beginPath()
       ctx.fillStyle = '#fff'
       ctx.arc(140,90,50,0,2*Math.PI)
       ctx.fill()
       ctx.closePath()

       ctx.beginPath()
       ctx.fillStyle = 'black'
       ctx.arc(140,90,50,0,Math.PI,true)
       ctx.fill()
       ctx.closePath()

       ctx.beginPath()
       ctx.fillStyle = 'black'
       ctx.arc(115,90,25,0,Math.PI)
       ctx.fill()
       ctx.closePath()

       ctx.beginPath()
       ctx.fillStyle = 'white'
       ctx.arc(165,90,25,0,Math.PI,true)
       ctx.fill()
       ctx.closePath()

       ctx.beginPath()
       ctx.fillStyle = 'white'
       ctx.arc(115,90,5,0,2*Math.PI)
       ctx.fill()
       ctx.closePath()
       ctx.beginPath()
       ctx.fillStyle = 'black'
       ctx.arc(165,90,5,0,2*Math.PI)
       ctx.fill()
       ctx.closePath()

       //文字
       ctx.save();
       ctx.fillStyle = "black"
       ctx.globalAlpha = "0.4"
       ctx.textAlign = "center"
       ctx.font = "16px Arial"
       ctx.shadowColor = "rgba(0,0,0,0.5)"
       ctx.shadowOffsetX = 20
       ctx.shadowOffsetY = -10
       ctx.shadowBlur = 2
       ctx.fillText('太极八卦图',140,30)
    })
 }
})