<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
margin: 0 auto;
border: 1px solid #000;
display: block;
}
</style>
</head>
<body>
<canvas id="cont" width="500px" height="500px">你好呀</canvas>
<script>
// 使用原生js操作canvas
// 1.获取画布
var canvas = document.querySelector('#cont')
// 2.获取画布的上下文
var ctx = canvas.getContext('2d')
// 画布宽高
var w = h = 500
let x = 100
let y = 100
let r = 20
// 水平速度
xSpeed = 2
// 垂直速度
ySpeed = 3
setInterval(() => {
// 清除画布
ctx.clearRect(0,0,w,h)
// 在小球碰到边缘时,速度取相反即可
if (x-r <=0 || x+r>=w) {
xSpeed = -xSpeed
}
x = x + xSpeed
if (y-r <=0 || y+r>=h) {
ySpeed = -ySpeed
}
y = y + ySpeed
// 水平运动
draw(x,y,r)
}, 10);
// 画小球
function draw(x,y,r) {
ctx.beginPath()
ctx.arc(x,y,r,0,Math.PI*2)
ctx.fillStyle = 'gold'
ctx.fill()
}
</script>
</body>
</html>效果图
运行起来是个动图，你们可以自己试试
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
