小编Oth*_* Me的帖子

如何使用大像素设置渐变动画?

我正在开展一个项目,在这个项目中,我希望黑暗覆盖屏幕,黑暗中的角色会发光.我尝试使用此代码为场景设置动画,然后在其上绘制黑暗:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

var pixelSize = 30;
var width = canvasWidth/pixelSize;
var height = canvasHeight/pixelSize;

var lightX = canvasWidth/2;
var lightY = canvasHeight/2;

var lightDiameter = 100;
var a = lightDiameter*pixelSize;

for(var x = 0; x < width; x++) {
  for(var y = 0; y < height; y++) {
    var alpha = 1.25 - a/(Math.pow(x*30 - lightX, 2) + Math.pow(y*30 - 
lightY, 2));
    ctx.fillStyle = "rgba( …
Run Code Online (Sandbox Code Playgroud)

javascript radial-gradients html5-canvas

6
推荐指数
1
解决办法
86
查看次数