canvas鼠标跟随代码

Html

Css

   * {
	margin:0;
	padding:0;
}
#canvas {
	background-color:#000;
}
body {
	overflow:hidden;
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var arrList = [];

function init() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
}
window.onresize = init
init()

function main() {
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    arrList.forEach(item => {
        item.draw()
    })
    requestAnimationFrame(main); //递归调用
}
canvas.addEventListener('mousemove', function(e) {
    creat(e.clientX, e.clientY)
})

function creat(x, y) {
    var temp = new Ball(x, y)
    arrList.push(new Ball(x, y))
    arrList[0].x = -2000
    arrList[0].y = -2000
}
main()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas鼠标跟随代码



代码描述：使用面向对象+canvas

更新时间：2022-03-07 23:37:10
有canvas基础都能理解，里面的冷知识ctx.globalcompositeoperation = 'lighter';表示两个重叠图形的颜色是通过颜色值相加来确定的。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qiqi1112

相关代码

canvas鼠标跟随代码

最新