master

分支 (1)

管理

管理

master

web_practice
/
canvas线性渐变.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="500"></canvas>
<script>
    var ctx = document.querySelector("canvas").getContext("2d");
    // 线性渐变起点和终点
    // var linearGradient = ctx.createLinearGradient(100,100,400,100);
    // // 起点颜色
    // linearGradient.addColorStop(0,"#000");
    // // 终点颜色
    // linearGradient.addColorStop(1,"#fff");
    // ctx.fillStyle = linearGradient;
    // ctx.fillRect(100,100,300,200);


    // for (var i = 0; i < 255; i++) {
    //     ctx.fillStyle = "rgb("+i+",0,0)";
    //     ctx.beginPath();
    //     console.log(ctx.fillStyle);
    //     ctx.fillRect(100,100,100+i,100);
    // }
</script>
</body>
</html>