H5画布绘制渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#myCanvas{
box-shadow: 0 0 5px black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var linear = ctx.createLinearGradient(0, 0, 0, 100);
linear.addColorStop(0, "red");
linear.addColorStop(0.5, "blue");
linear.addColorStop(1, "green");
ctx.fillStyle = linear;
ctx.fillRect(0,0,100,100);
ctx.globalAlpha = "0.2";
ctx.strokeStyle = "red";
ctx.strokeRect(150,150,100,100);
ctx.strokeStyle = "black";
ctx.strokeRect(250,250,100,100);
ctx.globalAlpha = "1";
var radial = ctx.createRadialGradient(230, 30, 10, 250, 50, 50);
radial.addColorStop(0,"red");
radial.addColorStop(0.5,"blue");
radial.addColorStop(0.9,"green");
radial.addColorStop(1,"rgba(0,0,0,0)");
ctx.fillStyle = radial;
ctx.fillRect(200, 0, 100, 100);
</script>
</html>
