JavaScript+html5 canvas繪製漸層地區完整執行個體，html5canvas

JavaScript+html5 canvas繪製漸層地區完整執行個體，html5canvas

本文執行個體講述了JavaScript+html5 canvas繪製漸層地區的方法。分享給大家供大家參考，具體如下：

運行效果如下：

具體代碼如下：

<!DOCTYPE html><html> <head>  <title>demo</title>  <style type="text/css">   #canvas {    border:3px solid gray;   }  </style> </head> <body>  <canvas id="canvas" width="500px" height="500px"></canvas> </body> <script type="text/javascript">  var canvas = document.getElementById("canvas");  var ctx = canvas.getContext("2d");  ctx.beginPath();  ctx.rect(0, 0, 200, 200);  ctx.closePath();  var gradient = ctx.createLinearGradient(0, 0, 200, 200);  gradient.addColorStop(0, "gray");  gradient.addColorStop(0.5, "red");  gradient.addColorStop(1, "blue");  ctx.fillStyle = gradient;  ctx.fill(); </script></html>