前言
以下是利用canvas实现炫彩小球的效果,需要利用基础的前端知识,我就来为大家展示一下叭
效果图如下
HTML
<body>
<canvas width="800" height="500"></canvas>
</body>
css
给画布设置边框样式
<style>
canvas{
border: 1px solid #000;
background-color: #ccc;
}
</style>
js(重点
)
// 得到画布
var canvas = document.querySelector('canvas');
// 获取上下文
var ctx = canvas.getContext("2d");
// 球类
function Ball(x,y,r){
this.x = x;
this.y = y;