1. 程式人生 > >canvas 的線性漸變

canvas 的線性漸變

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<canvas id="canvas">
	
</canvas>
</body>
</html>
<script type="text/javascript">
	/*
		fillStyle 不僅可以填充顏色還可以填充漸變色
		var grd = context.createLinderGradident(x,start,ystart,xend,yend);
		grd.addColorStop(stop,color);
	*/
	var canvas = document.getElementById('canvas');

	canvas.width = 800;
	canvas.height = 800;

	var context = canvas.getContext('2d');
	var grd = context.createLinearGradient(400,800,400,0);
	grd.addColorStop(0.0,'#fff');
	grd.addColorStop(1.0,'#000');
	context.fillStyle = grd;
	context.fillRect(0,0,800,800);
</script>