一个简单的鼠标跟随demo（请移动鼠标）

Html

Css

 * {
	margin:0;
	padding:0
}

let canvas = document.getElementById("myCanvas");
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

let ctx = canvas.getContext("2d");
let R = 0,
    G = 70,
    B = 255,
    rs = 1,
    gs = 1,
    bs = 1;

ctx.fillRect(0, 0, width, height);

function Circle(x, y, size, color, opc) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.opc = opc
}
Circle.prototype.draw = function() {
    ctx.beginPath();
    ctx.strokeStyle = this.color;

ctx.lineWidth = 4
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.stroke();
}

Circle.prototype.update = function() {
    this.size = this.size + 1;
    this.opc = (60 - this.size) / 60;
    this.color = `rgba(${R},${G},${B},${this.opc})`
}
// let circle = new Circle(100,100,10,"red");
let circleList = [];

// 响应事件
canvas.addEventListener("mousemove", function(e) {
    circleList.push(new Circle(e.clientX, e.clientY, 20, `rgba(${R},${G},${B},${1})`, 1))
})

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

立即下载

一个简单的鼠标跟随demo（请移动鼠标）

代码描述：canvas练习，看到好的东西就忍不住模仿

2

最新

发表评论全部评论

暂时没有评论！

→_→0

2020/9/29 16:30:56

wasm版本地址： https://github.com/kiliaosi/wasm-circle-list/blob/master/src/lib.rs 回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

→_→

相关代码

一个简单的鼠标跟随demo（请移动鼠标）

最新