给个canvas style宽高 和标题的宽高一样 一定要给style 宽高 否则 拉伸屏幕流光位置就变了
function drawCanvas4() {
let c = document.getElementById("myCanvas4");
let context = c.getContext("2d");
let width = 1920;//画布宽度
let height = 80;//画布高度
var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var designWidth = 1920; // 设计稿的宽度
var cssPixelRatio = browserWidth / designWidth; // CSS像素与设计稿像素的比例
let fPoints = [{ x: 440, y: 30, r: 1.5 }];//初始点坐标
function drawCircle() {
for (let i = 0; i < fPoints.length; i++) {
context.lineWidth = 0; //线条宽度-空心圆
// context.strokeStyle = 'rgba(2, 179, 253,0.02)'; //颜色
context.shadowBlur = 0;// 设置或返回用于阴影的颜色
context.shadowColor = 'rgba(2, 179, 253,1)'; // 设置或返回用于阴影的模糊级别
context.fillStyle = 'rgba(2, 179, 253,1)';//填充颜色-实心圆
context.fill();//画实心圆
context.beginPath();
context.arc(fPoints[i].x, fPoints[i].y, fPoints[i].r, 0, Math.PI * 2);
context.closePath();
}
if (fPoints[0].x < 640) {
fPoints[0].x += 2;
// fPoints[0].y -= 1.15;
} else if (fPoints[0].x < 712) {
fPoints[0].y += 1;
fPoints[0].x += 2;
} else if (fPoints[0].x < 1208) {
fPoints[0].x += 2;
}
else if (fPoints[0].x < 1278) {
fPoints[0].y -= 1;
fPoints[0].x += 2;
}
else if (fPoints[0].x < 1550) {
fPoints[0].x += 2;
}
else if (fPoints[0].x >= 1550) {
fPoints = [{ x: 440, y: 30, r: 1.5 }];//初始点坐标
}
}
function render() {
//默认值为source-over
let prev = context.globalCompositeOperation;
//只显示canvas上原图像的重叠部分
context.globalCompositeOperation = 'destination-in';
//设置主canvas的绘制透明度
context.globalAlpha = 0.9;
//这一步目的是将canvas上的图像变的透明
context.fillRect(0, 0, width, height);
//在原图像上重叠新图像
context.globalCompositeOperation = prev;
//在主canvas上画新圆
drawCircle();
if (width !== 0) {
//在动画没有结束前,递归渲染
window.requestAnimationFrame(render);
}
}
window.requestAnimationFrame(render);
}