JavaScript canvasはグラデーション色の長方形を描きます。


本論文の例では、canvasで描いたグラデーションの長方形の具体的なコードを共有します。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 canvas {
  border: 1px solid #ccc;
 }
/* .linearGradient{
  width: 400px;
  height: 100px;
  background-image: linear-gradient(to right,pink,blue);
 }*/
 </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
 var myCanvas = document.querySelector('canvas');
 var ctx = myCanvas.getContext('2d');
 /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
 /*                 */
 /*         */
 /*       */
 /*x0y0     x1y1            */
 var linearGradient = ctx.createLinearGradient(100,100,500,400);
 linearGradient.addColorStop(0,'pink');
 //linearGradient.addColorStop(0.5,'red');
 linearGradient.addColorStop(1,'blue');
 ctx.fillStyle = linearGradient;
 ctx.fillRect(100,100,400,100);
 /*pink---->blue*/
 /*      ---->                */
 /*                 */
</script>
</body>
</html>
運転結果は以下の通りです

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。