魔方图形代码

最新推荐文章于 2024-07-27 14:42:55 发布

Cathe_littletiger

最新推荐文章于 2024-07-27 14:42:55 发布

阅读量861

点赞数 1

分类专栏： code 文章标签：魔方图形代码

本文链接：https://blog.csdn.net/Cathe_littletiger/article/details/50010603

版权

code 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

    </canvas>
</div>

<script>
    window.onload=function(){
        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="#AA9033";

        context.fill();

        context.beginPath();
        for(var i=0; i<=20; i++){
            drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 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();
    }
    function drawWhiteRect(cxt,x,y,width,height){
        cxt.beginPath();
        cxt.rect(x,y,width,height);

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

        cxt.stroke();
    }

</script>
</body>
</html>
</body>
</html>

Cathe_littletiger

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
魔方图形代码

html>html lang="en">head> meta charset="UTF-8"> title>title>head>body>div id="canvas-warp"> canvas id="canvas"style="border:1px solid #aaaaaa;display: block;margin: 50px auto;">
复制链接

扫一扫