使用canvas画布画出刮刮乐要被刮的图片,使用移动清除画布。
当前代码封装为刮刮乐的组件;
vue代码:
scss代码:
.page{ width: 750rpx; height: 100vh; position: relative; } .bg{ width: 750rpx; height: 100vh; } .content{ width: 750rpx; min-height: 100vh; height: 1448rpx; position: absolute; top: 0; left: 0; } .logo{ height: 60rpx; display: flex; justify-content: center; margin-top: 90rpx; image{ height: 60rpx; } } .title{ height: 254rpx; display: flex; justify-content: center; margin-top: 20rpx; image{ width: 640rpx; height: 254rpx; } } .notification{ width: 370rpx; height: 56rpx; display: flex; justify-content: space-between; align-items: center; margin: -60rpx auto 0 auto; view{ width: 26rpx; height: 4rpx; background-color: #fff; } text{ font-size: 38rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; } } .box{ width: 658rpx; height: 422rpx; margin: 110rpx auto 0 auto; position: relative; .scrapingBg{ width: 100%; height: 100%; } .scrapingBox{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 52rpx 62rpx; .scrapingBoxContent{ width: 536rpx; height: 318rpx; z-index: 2; position: relative; image{ width: 100%; height: 100%; } view { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 100rpx; color: #1B9AF9; text-shadow: 0px 4px 8px rgba(149,216,255,0.5); } } } } .count{ display: flex; justify-content: center; margin-top: 44rpx; .tip{ font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #777777; text{ color: #0039AF; } } } .btns{ display: flex; align-items: center; justify-content: space-between; margin-top: 26rpx; } .btn{ width: 376rpx; height: 166rpx; position: relative; .btnImg{ width: 100%; height: 100%; } .btnConent{ width: 100%; position: absolute; top: 50%; transform: translateY(-100%); display: flex; justify-content: center; align-items: center; image{ width: 42rpx; height: 42rpx; margin-right: 12rpx; } text{ font-size: 42rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; } } } .win{ width: 750rpx; height: 100vh; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; } .win_box{ width: 662rpx; height: 60%; padding: 40rpx; box-sizing: border-box; border-radius: 24rpx; } .win_box_bg{ background: #C3E5FE; } .bg3{ background: #C3E5FE; } .iconcolseIcon{ font-size: 58rpx; margin-top: 98rpx; } .win_box1{ width: 630rpx; height: 922rpx; position: relative; } .win_bg{ width: 630rpx; height: 922rpx; } .win_content{ width: 630rpx; height: 922rpx; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; } .win_tips{ font-size: 48rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; margin-top: 290rpx; } .win_title{ font-size: 48rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; color: #FE6631; margin: 170rpx 0; } .win_btn{ width: 280rpx; height: 80rpx; line-height: 80rpx; text-align: center; background: #FFE047; border-radius: 46rpx; font-size: 32rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; color: #13112C; } .win_tit{ font-size: 48rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; margin-bottom: 32rpx; } .win_box2{ width: 662rpx; height: 900rpx; background: #FFFFFF; border-radius: 24rpx; display: flex; flex-direction: column; } .items{ width: 662rpx; height: 108rpx; background: #C3E5FE; border-radius: 24rpx 24rpx 0rpx 0rpx; display: flex; align-items: center; flex-shrink:0 } .left,.right{ width: 50%; text-align: center; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; } .i_title{ font-size: 36rpx; } .list{ height: 792rpx; padding-bottom: 20rpx; overflow: hidden; } .item{ width: 662rpx; height: 88rpx; display: flex; align-items: center; justify-content: space-around; } .item:nth-child(2n){ background-color: #F4F4F4; } .r_btn{ width: 160rpx; height: 60rpx; line-height: 60rpx; text-align: center; background: #FFC659; border-radius: 46rpx; font-family: SourceHanSansSC-Medium, SourceHanSansSC; font-weight: bold; font-size: 32rpx; margin:0 auto; }效果: