<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>谢谢惠顾</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
//获取画布、元素并初始化
let c = document.getElementById('myCanvas')
c.width = 140;
c.height = 60;
c.style.backgroundColor = 'rgb(221, 214, 212)'
//获取上下文对象
let ctx = c.getContext('2d')
//将需要展示的字提前写好并隐藏
ctx.font = "30px Arial";
ctx.fillStyle = 'rgb(221, 214, 212)'
ctx.fillText("谢谢惠顾", 10, 40);
//将画布设置成 新图形只展示与老图形重叠的那部分
ctx.globalCompositeOperation = "source-atop";
c.addEventListener('mousemove', function (e) {
let x = e.pageX - this.offsetLeft
let y = e.pageY - this.offsetTop
if (x > 0 && x < ctx.measureText("再来一瓶啊").width && y > 10 && y < 50) {
this.style.cursor = 'pointer'
}
else {
this.style.cursor = 'default'
}
ctx.beginPath()
ctx.fillStyle = "white";
ctx.arc(x, y, 10, 0, 2 * Math.PI)
ctx.fill()
})
</script>
</body>
</html>
2167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
