```html
<html>
<div style="height: 1920px; width: 1080px;">
<canvas
id="myCanvas"
height="600px"
width="900px"
@click="handleClick"
>
If u see this, it means that your broser do not support canvas
</canvas>
</div>
</html>
<script>
console.log('loaded')
drawDiv()
function drawDiv() {
let c = document.getElementById('myCanvas')
c.addEventListener('click', function handleClick(event) {
console.log(event)
// console.log(c.style.cursor)
})
c.addEventListener('mousemove', function handleMouseOver(event) {
// console.log(event)
console.log(event.clientX)
console.log(event.clientY)
console.log(100 < event.clientX < 200)
console.log(100 < event.clientY < 200)
if ((100 < event.clientX) && (event.clientX< 200) && (100 < event.clientY) && (event.clientY < 200)) {
console.log('pointer')
c.style.cursor='pointer'
} else {
console.log('default')
c.style.cursor='default'
}
})
let ctx = c.getContext('2d')
ctx.fillStyle='#FF00000';
ctx.fillRect(100, 100, 100, 100)
ctx.fillRect(80, 100, 10, 5)
ctx.fillRect(80, 120, 10, 5)
ctx.fillRect(80, 140, 10, 5)
ctx.fillRect(80, 160, 10, 5)
ctx.fillRect(80, 180, 10, 5)
ctx.fillRect(80, 200, 10, 5)
ctx.fillRect(0, 300, 500, 3)
}
</script>```
canvas
最新推荐文章于 2023-10-30 23:25:34 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
