canvas之渐变的矩形图

作者: 小透明进击战 | 来源:发表于2019-06-30 16:30 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border: 1px solid hotpink;
        }
        .linearGradient {
            width: 500px;
            height: 100px;
            background-image: linear-gradient(to right,green,blue);
        }
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600px" height="400px"></canvas>
<script>
    var myCanvas=document.querySelector('canvas');
    var ctx=myCanvas.getContext('2d');
    //ctx.fillStyle='pink';
    //创建一个渐变方案
    var linearGradient=ctx.createLinearGradient(100,100,200,100);
    linearGradient.addColorStop(0,'pink');
    linearGradient.addColorStop(0.5,'grey');
    linearGradient.addColorStop(1,'green');
    ctx.fillStyle=linearGradient;
    ctx.fillRect(100,100,200,100);
</script>
</body>
</html>