按住左边滑块成上方拼图( 四 )

2026-03-19 云知道成上方拼图

document.addEventListener(\”mouseup\”, up);
},
draw(mx = 200, bx = 20, y = 50) {
let mainDom = document.querySelector(\”#codeImg\”);
let bg = mainDom.getContext(\”2d\”);
let width = mainDom.width;
let height = mainDom.height;
let blockDom = document.querySelector(\”#sliderBlock\”);
let block = blockDom.getContext(\”2d\”);
//重新赋值，让canvas进行重新绘制
blockDom.height = height;
mainDom.height = height;
let imgsrc = https://atx106.com/require(/”../assets/images/back.jpg/”);
let img = document.createElement(\”img\”);
img.style.objectFit = \”scale-down\”;
img.src = https://atx106.com/imgsrc;
img.onload = function() {
bg.drawImage(img, 0, 0, width, height);
block.drawImage(img, 0, 0, width, height);
};
let mainxy = { x: mx, y: y, r: 9 };
let blockxy = { x: bx, y: y, r: 9 };
this.drawBlock(bg, mainxy, \”fill\”);
this.drawBlock(block, blockxy, \”clip\”);
},
//绘制拼图
drawBlock(ctx, xy = { x: 254, y: 109, r: 9 }, type) {
let x = xy.x,
y = xy.y,
r = xy.r,
w = 40;
let PI = Math.PI;
//绘制
ctx.beginPath();
//left
ctx.moveTo(x, y);
//top
ctx.arc(x + (w + 5) / 2, y, r, -PI, 0, true);
ctx.lineTo(x + w + 5, y);
//right
ctx.arc(x + w + 5, y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
ctx.lineTo(x + w + 5, y + w);
//bottom
ctx.arc(x + (w + 5) / 2, y + w, r, 0, PI, false);
ctx.lineTo(x, y + w);
ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
ctx.lineTo(x, y);
//修饰，没有会看不出效果
ctx.lineWidth = 1;
ctx.fillStyle = \”rgba(255, 255, 255, 0.5)\”;
ctx.strokeStyle = \”rgba(255, 255, 255, 0.5)\”;
ctx.stroke();
ctx[type]();
ctx.globalCompositeOperation = \”xor\”;
}
}
};
</script>
<style>
.slidingPictures {
padding: 0;
width: 300px;
border-radius: 2px;
}
</style>
<style scoped lang=\”scss\”>
#login {
display: flex;
flex-flow: row;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 100%;
background-image: url(\”../assets/images/back.jpg\”);
background-size: 100% 100%;
.loginFrom {
width: 300px;
margin-top: -10vw;
margin-right: 10vw;
.login-item {
display: flex;
justify-content: center;
align-items: center;
}
.login-title {
color: #ffffff;
font-size: 16px;
margin-bottom: 10px;
}
.login-bottom {
margin-top: 15px;
}
.login-bottom:hover {
background: rgba(28, 136, 188, 0.5);
}
.login-bottom:active {
background: rgba(228, 199, 200, 0.5);
}
/deep/.login-inputorbuttom {
height: 40px;
width: 300px;
background: rgba(57, 108, 158, 0.5);
border-radius: 20px;
border: #396c9e 1px solid;
font-size: 14px;
color: #ffffff;
.el-input–small,
.el-input__inner {
line-height: 43px;
border: none;
color: #ffffff;
font-size: 14px;
height: 40px;
border-radius: 20px;
background: transparent;
text-align: center;
}
.el-input__icon {
line-height: 40px;
font-size: 16px;
}
}
}
}
/*该样式最终是以弹窗插入*/
.sliding-pictures {
width: 100%;
.vimg {
width: 100%;
height: 170px;
#codeImg,
#sliderBlock {

推荐阅读

上一篇：天上的彩虹是光源吗

下一篇：activex控件是干嘛的 activex控件怎么启用