[CSS] 圓形怎麼依單及偶數做分割顏色

Question

這是 code demohttps://codepen.io/mirari/pen/XLgBQP
我要如何讓他依單偶數做分割顏色

(index % 2 == 0) ? {'background-color': #FFD2D2'} : {'background-color': '#FFF0AC'}

html {
  background: #dd7c7d;
}

.wheel-wrapper {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wheel-pointer {
  width: 60px;
  height: 60px;
  border-radius: 1000px;
  background: yellow;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 60px;
  z-index: 10;
  cursor: pointer;

  &::after {
    content: "";
    position: absolute;
    top: -32px;
    left: 50%;
    border-width: 0 8px 40px;
    border-style: solid;
    border-color: transparent transparent yellow;
    transform: translateX(-50%);
  }
}
.wheel-bg {
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  overflow: hidden;
  transition: transform 4s ease-in-out;
  background: #7eef97;

  &.freeze {
    transition: none;
    background: red;
  }
}

.prize-list {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

.prize-item-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
}

.prize-item {
  width: 100%;
  height: 100%;
  transform-origin: bottom;

  .prize-name {
    padding: 16px 0;
  }

  .prize-icon {
  }
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<span id="app">
  <span>Prize number: {{ prizeNumber }}</span>
  <button type="button" @click="!rolling && prizeNumber < 8 && (prizeNumber++)" :disabled="rolling || prizeNumber === 8">Add</button>
  <button type="button" @click="!rolling && prizeNumber > 2 && (prizeNumber--)" :disabled="rolling || prizeNumber === 2">Remove</button>
   <div class="wheel-wrapper">
    <div
      class="wheel-pointer"
      @click="onClickRotate"
    >
      Start
    </div>
    <div
      class="wheel-bg"
      :class="{freeze: freeze}"
      :style="`transform: rotate(${wheelDeg}deg)`"
    >
      <div class="prize-list">
        <div
          class="prize-item-wrapper"
          v-for="(item,index) in prizeList"
          :key="index"
        >
          <div
            class="prize-item"
            :style="`transform: rotate(${(360/ prizeList.length) * index}deg)`"
          >
            <div class="prize-name">
              {{ item.name }}
            </div>
            <div class="prize-icon">
              <img :src="item.icon">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

直接加背景加不上，因为是通过旋转实现的，加上直接显示正方形的背景，得不到扇形这种效果。需要在wheel-bg下放一个absolute定位的canvas做背景，然后在canvas绘制扇形。
代码如下

<style>
    html {
        background: #dd7c7d;
    }

    .wheel-wrapper {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .wheel-pointer {
        width: 60px;
        height: 60px;
        border-radius: 1000px;
        background: yellow;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 60px;
        z-index: 10;
        cursor: pointer;
    }

    .wheel-pointer::after {
        content: "";
        position: absolute;
        top: -32px;
        left: 50%;
        border-width: 0 8px 40px;
        border-style: solid;
        border-color: transparent transparent yellow;
        transform: translateX(-50%);
    }

    .wheel-bg {
        width: 100%;
        height: 100%;
        border-radius: 1000px;
        overflow: hidden;
        transition: transform 4s ease-in-out;
        background: #7eef97;
    }

    .wheel-bg.freeze {
        transition: none;
        background: red;
    }

    .prize-list {
        width: 100%;
        height: 100%;
        position: relative;
        text-align: center;
    }

    .prize-item-wrapper {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 150px;
    }

    .prize-item {
        width: 100%;
        height: 100%;
        transform-origin: bottom;
    }

    .prize-item .prize-name {
        padding: 16px 0;
    }
</style>
<div id="app">
    <span>Prize number: {{ prizeNumber }}</span>
    <button type="button" @click="!rolling && prizeNumber < 8 && (prizeNumber++);drawBg()" :disabled="rolling || prizeNumber === 8">Add</button>
    <button type="button" @click="!rolling && prizeNumber > 2 && (prizeNumber--);drawBg()" :disabled="rolling || prizeNumber === 2">Remove</button>
    <div class="wheel-wrapper">
        <div class="wheel-pointer"
             @click="onClickRotate">
            Start
        </div>
        <div class="wheel-bg"
             :class="{freeze: freeze}"
             :style="`transform: rotate(${wheelDeg}deg)`">
            <canvas id="bg" width="300" height="300" style="position:absolute;left:0;top:0;width:100%;height:100%"></canvas>
            <div class="prize-list">
                <div class="prize-item-wrapper"
                     v-for="(item,index) in prizeList"
                     :key="index">
                    <div class="prize-item"
                         :style="`transform: rotate(${(360/ prizeList.length) * index}deg)`">
                        <div class="prize-name">
                            {{ item.name }}
                        </div>
                        <div class="prize-icon">
                            <img :src="item.icon">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var Main = {
        data() {
            return {
                freeze: false,
                rolling: false,
                wheelDeg: 0,
                prizeNumber: 8,
                prizeListOrigin: [
                    {
                        icon: "https://picsum.photos/40?random=1",
                        name: "$10000"
                    },
                    {
                        icon: "https://picsum.photos/40?random=6",
                        name: "Thank you!"
                    },
                    {
                        icon: "https://picsum.photos/40?random=2",
                        name: "$500"
                    },
                    {
                        icon: "https://picsum.photos/40?random=3",
                        name: "$100"
                    },
                    {
                        icon: "https://picsum.photos/40?random=6",
                        name: "Thank you!"
                    },
                    {
                        icon: "https://picsum.photos/40?random=4",
                        name: "$50"
                    },
                    {
                        icon: "https://picsum.photos/40?random=5",
                        name: "$10"
                    },
                    {
                        icon: "https://picsum.photos/40?random=6",
                        name: "Thank you!"
                    }
                ]
            };
        },
        mounted() {
            this.ctx = document.querySelector('#bg').getContext('2d');
            this.drawBg();
        },
        computed: {
            prizeList() {
                return this.prizeListOrigin.slice(0, this.prizeNumber);
            }
        },
        methods: {
            drawBg() {
                var ctx = this.ctx;
                var r = 150;
                var angle = Math.PI * 2 / this.prizeNumber;
                var startAngle = - angle / 2;
                var fixed12Clock = Math.PI / 2;//arc 0角度为3点钟方向，需要修正成12点方向
                for (var i = 0; i < this.prizeNumber; i++) {
                    ctx.beginPath();
                    ctx.moveTo(r, r);
                    ctx.fillStyle = i % 2 ? '#FFD2D2' : '#FFF0AC';
                    ctx.arc(r, r, r, i * angle + startAngle - fixed12Clock, (i + 1) * angle + startAngle - fixed12Clock);
                    ctx.fill();
                }
            },
            onClickRotate() {
                if (this.rolling) {
                    return;
                }
                const result = Math.floor(Math.random() * this.prizeList.length);
                this.roll(result);
            },
            roll(result) {
                this.rolling = true;
                const { wheelDeg, prizeList } = this;
                this.wheelDeg =
                    wheelDeg -
                    wheelDeg % 360 +
                    6 * 360 +
                    (360 - 360 / prizeList.length * result);
                setTimeout(() => {
                    this.rolling = false;
                    alert("Result：" + prizeList[result].name);
                }, 4500);
            }
        },
        watch: {
            prizeNumber() {
                this.freeze = true;
                this.wheelDeg = 0;

                setTimeout(() => {
                    this.freeze = false;
                }, 0);
            }
        }
    };
    var App = Vue.extend(Main);
    new App().$mount("#app");

</script>

有帮助麻烦点下【采纳该答案】