canvas标签黑白正方形

canvas标签黑白正方形通过canvas标签制作正方体，带给视觉效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px #9057ff solid; display: block;margin: 50px auto">

</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width=800;
    canvas.height=600;
    var context = canvas.getContext('2d');
    context.beginPath();
    context.rect(0, 0, 800, 600);
    context.fillStyle = "pink";

    context.fill();
    context.beginPath();
    for(var i=0; i<=20; i++){
        drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 - 20 * i, 390 - 20 * i);
    }

    context.beginPath();
    context.rect(395, 295, 5, 5);
    context.fillStyle = "black";
    context.lineWidth = 5;

    context.fill();
    context.stroke();
    function drawBlackRect(cxt, x, y, width, height){
        cxt.beginPath();
        cxt.rect(x, y, width, height);

        cxt.lineWidth = 5;
        cxt.strokeStyle = "black";

        cxt.stroke();
    }



</script>
</body>

</html>

canvas标签 黑白正方形

相关推荐

canvas标签黑白正方形