uniapp使用canvas制作取色器

预览效果

1.主页面  index.vue（引入组件，编写数据逻辑）

.context {

  width: 90vw;

  margin-top: 30rpx;

  background: #ffffff;

  border-radius: 44rpx;

}

2.组件页面  color.vue  （组件页面，负责选择颜色）

.canvasPage {

  width: 100%;

  padding: 50rpx 40rpx 50rpx 40rpx;

}

.textArea {

  width: 100%;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  margin-top: 20rpx;

  margin-bottom: 20rpx;

  .title {

    font-size: 24rpx;

    font-weight: bold;

    color: #344d78;

  }

  .RGB {

    font-size: 24rpx;

    font-weight: 400;

    color: #aebdd7;

  }

}

.canvasArea {

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: flex-start;

}

.showColor {

  width: 20rpx;

  height: 20rpx;

  margin-right: 20rpx;

}

.colorItem {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 50rpx;

  .default {

    .color {

      width: 100rpx;

      height: 100rpx;

      border-radius: 50%;

    }

    .text {

      font-size: 24rpx;

      font-weight: 400;

      color: #aebdd7;

      line-height: 80rpx;

    }

  }

}

3.调色板图片

4.最终效果