我正在尝试模拟这个网站的流畅程度:http://material.cmiscm.com/ (你可能以前见过)
所以，我从非常非常小的地方开始，只是尝试模拟紫色部分中的渐变从框中消失的方式。他的渐变是对 Angular 线的——为简单起见，我的是水平的。
但是，我的问题是我的渐变非常不稳定，即使我尝试更改 RECT_INCREMENT
fiddle : https://jsfiddle.net/16he6jfu/
原始代码(ctrl +v'able):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#canvas {
padding: 0;
margin: 0;
}
body {
background: #6D00D0;
}
</style>
<body>
<canvas id="canvas" width="900" height="555">
</canvas>
</body>
<script>
var MAX_RECT_LENGTH = 800;
var RECT_INCREMENT = 50;
var RECT_X_ORIG = 0;
var RECT_Y_ORIG = 100;
var RECT_Y_MIN = 0;
var RECT_Y_MAX = 100;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var gra = context.createLinearGradient(0, 0, 800, 0);
gra.addColorStop(0, 'rgba(229, 88, 95, .6)');
gra.addColorStop(1, 'rgba(255, 255, 255, 0)');
var path = 0;
function draw(){
if (path < MAX_RECT_LENGTH) {
context.beginPath();
// 1
context.moveTo(RECT_X_ORIG + path, RECT_Y_ORIG);
//console.log('1) ' + (RECT_X_ORIG + path) + ', ' + RECT_Y_ORIG);
// 2
path = path+RECT_INCREMENT;
context.lineTo(RECT_X_ORIG + path, RECT_Y_ORIG);
//console.log('2) ' + (RECT_X_ORIG + path) + ', ' + RECT_Y_ORIG);
// 3
context.lineTo(RECT_X_ORIG + path, RECT_Y_MIN);
//console.log('3) ' + (RECT_X_ORIG + path) + ', ' + RECT_Y_MIN);
// 4
context.lineTo(RECT_X_ORIG + path - RECT_INCREMENT, RECT_Y_MIN);
//console.log('4) ' + (RECT_X_ORIG + path - RECT_INCREMENT) + ', ' + RECT_Y_MIN);
// 5
context.lineTo(RECT_X_ORIG + path - RECT_INCREMENT, RECT_Y_MAX);
//console.log('5) ' + (RECT_X_ORIG + path - RECT_INCREMENT) + ', ' + RECT_Y_MAX);
context.closePath();
context.fillStyle=gra;
context.fill();
}
window.requestAnimationFrame(draw);
}
window.onload = function() {
window.requestAnimationFrame(draw);
}
</script>
</html>
最佳答案
创建渐变有点昂贵。无需在每个动画循环中重新创建渐变，只需在应用开始时创建完整的渐变矩形并在循环中逐步显示它。
这是示例代码和演示
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var rect=createRectCanvas();
var width=1;
requestAnimationFrame(draw);
function draw(){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(rect,0,0,width,rect.height,0,0,width,rect.height);
width+=10;
if(width<cw && width<rect.width){
requestAnimationFrame(draw);
}
}
function createRectCanvas(){
var c=document.createElement('canvas');
var context=c.getContext('2d');
c.width=800;
c.height=100;
var gra = context.createLinearGradient(0, 0, 800, 0);
gra.addColorStop(0, 'rgba(229, 88, 95, .6)');
gra.addColorStop(1, 'rgba(255, 255, 255, 0)');
context.fillStyle=gra;
context.fillRect(0,0,800,100);
return(c);
}body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }<canvas id="canvas" width=900 height=500></canvas>关于javascript - Canvas 动画似乎没有以 60 fps 的速度运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36948519/