canvas案例三不规则按钮Tab不规则按钮Tab 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑

不规则按钮Tab 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

知识点

文本居中

 // 设置水平居中
 ctx_button1.textAlign = "center";
 // 设置垂直对齐方式
 ctx_button1.textBaseline = "middle";

globalCompositeOperation 注意的是，使用完改属性后，需要置为默认。其他元素才不受影响,默认属性是source-over

ctx_button1.beginPath()
ctx_button1.globalCompositeOperation = 'destination-out'
ctx_button1.closePath()
ctx_button1.beginPath()
ctx_button1.globalCompositeOperation = 'source-over'
ctx_button1.closePath()

其他知识点参见

案例一时钟

案例二刮刮乐

code.juejin.cn/pen/7169874…

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title>canvas</title>
   <style>
       canvas {
           box-shadow: 0px 0px 5px #ccc;
           border-radius: 8px;
       }


       .button {
           display: inline-block;
           width: 400px;
           height: 100px;
           background-color: #ffffff;
           position: relative;
       }

       #canvas_button1,
       #canvas_button2 {
           border-radius: 8px;
           box-shadow: unset;

       }

       #canvas_button2 {
           position: relative;
           left: -40px;
       }
   </style>
</head>

<body>

   <div id="app">

       <div class="button">
           <canvas id="canvas_button1" width="180" height="40"></canvas>
           <canvas id="canvas_button2" width="180" height="40"></canvas>

       </div>

       <canvas id="canvas_move" width="430" height="430"></canvas>

   </div>

   <script>

let isButton1 = true
       let colorArray = [{
           main: '#3384E2',
           text: '#fff'

       }, {
           main: '#EAF2FC',
           text: '#000'
       }]


      const canvasButton1 = document.getElementById('canvas_button1')
      const canvasButton2 = document.getElementById('canvas_button2')
      canvasButton1.addEventListener('click', () => {
         isButton1 = true
         buttonDemo()

      })

       canvasButton2.addEventListener('click', () => {
         isButton1 = false
         buttonDemo()
      })

         buttonDemo()


       function buttonDemo() {

           // bool 转number类型的 true === 1 false === 0 所以根据isButton1字段可以获取当前按钮的颜色和字体颜色。
           const button1Color = colorArray[Number(!isButton1)]
           const button2Color = colorArray[Number(isButton1)]


           const ctx_button1 = canvasButton1.getContext('2d')
           ctx_button1.fillStyle = button1Color.main
           ctx_button1.fillRect(0, 0, 180, 40)
           ctx_button1.beginPath()
           // 涂抹空白的部分，使原来的矩形看起来成为我们想要的按钮形状。
           ctx_button1.moveTo(180, 0)
           ctx_button1.lineTo(180, 40)
           ctx_button1.lineTo(140, 40)
           // 意思是前面beginPath开始的部分都是以destination-out 类型来渲染的，也就是画的三角形会以透明的形式显示在目标图形上。
           ctx_button1.globalCompositeOperation = 'destination-out'
           ctx_button1.fill()
           ctx_button1.closePath()
           // 开始画按钮文本，注意globalCompositeOperation要恢复成默认的，否则会继续白色。
           ctx_button1.beginPath()
           ctx_button1.globalCompositeOperation = 'source-over'
           ctx_button1.font = '16px 微软雅黑'
           ctx_button1.fillStyle = button1Color.text
           ctx_button1.textAlign = "center";
           // 设置垂直对齐方式
           ctx_button1.textBaseline = "middle";
           ctx_button1.fillText('按钮一', 86, 20)
           ctx_button1.closePath()




           const ctx_button2 = canvasButton2.getContext('2d')
           ctx_button2.beginPath()
           ctx_button2.globalCompositeOperation = 'source-over'
           ctx_button2.fillStyle = button2Color.main
           ctx_button2.fillRect(0, 0, 180, 40)
           ctx_button2.closePath()
           ctx_button2.beginPath()
           ctx_button2.font = '16px 微软雅黑'
           ctx_button2.fillStyle =  button2Color.text
           ctx_button2.textAlign = "center";
           // 设置垂直对齐方式
           ctx_button2.textBaseline = "middle";
           ctx_button2.fillText('按钮二', 86, 20)
           ctx_button2.closePath()
            ctx_button2.beginPath()

           ctx_button2.moveTo(0, 0)
           ctx_button2.lineTo(40, 0)
           ctx_button2.lineTo(0, 40)
           ctx_button2.globalCompositeOperation = 'destination-out'
           ctx_button2.fill()
           ctx_button2.closePath()

       }
           </script>

   <!-- built files will be auto injected -->
</body>

</html>

接下来会实现掘金九宫格抽奖

canvas案例三 不规则按钮Tab

知识点

canvas案例三不规则按钮Tab