不锈钢按钮金属质感不锈钢按钮最近看到一个非常有意思的按钮---不锈钢按钮，真的是快笑死我了~~ 下面是效果图。

事件

金属质感不锈钢按钮
最近看到一个非常有意思的按钮。不锈钢按钮，真的是快笑死我了~~ 下面是效果图

不锈钢按钮.gif

今天就来实现下，代码已经上传 btn-show

大致流程

1、假装btn控件承载

<template>

<button id="btn">Button</button>

</template>

2、创建一个canvas 的画布

canvas = document.createElement("canvas");

3、打开摄像头，创建视频流 video

const video = document.createElement("video");

video.srcObject = stream;

video.play();

4、将图像绘制到 canvas 上

ctx.drawImage(

    imageBitmap,

    cropLeft,

    cropTop,

    cropWidth + 10,

    cropHeight,

    50,

    -6,

    canvas.width,

    canvas.height

);

// 将 canvas 转换为 data URL，并将其设置为按钮的背景

const dataURL = canvas.toDataURL("image/jpeg");

btn.style.backgroundImage = `url(${dataURL})`;

这真的是

前端真好玩

我在想-什么情况下会出现如此按钮
难道是你的设计师，会针对某一块功能交互改来改去，改来改去的时候。可以给他来一个不锈钢按钮
纯属娱乐。周末了，大家开心开心~