Canvas制作(在画布四个角与中间位置画五个100*80，实心矩形要求颜色不同)

最新推荐文章于 2023-02-15 10:49:32 发布

LJ·START

最新推荐文章于 2023-02-15 10:49:32 发布

阅读量436

点赞数 1

分类专栏： Canvas 文章标签： canvas html5 html css javascript

本文链接：https://blog.csdn.net/weixin_44790446/article/details/115013113

版权

本文介绍了如何使用Canvas在HTML5画布的四个角落及中央位置绘制五个大小为100*80的实心矩形，每个矩形颜色各异，详细阐述了Canvas的绘图方法和颜色设置技巧。

摘要由CSDN通过智能技术生成

Canvas制作:

需求:在画布四个角与中间位置画五个100*80的矩形，实心矩形要求颜色不同

<style>
    body{
        text-align:center;
    }

    canvas{
        background-color:#ccc;
    }
</style>

<body>
    <h1>Canvas矩形</h1>
    
    <canvas id="canvas" width="500" height="400"></canvas>
</body>

<script>
    var canvas=document.getElementById('canvas');
   
    var ctx=canvas.getContext('2d');
    
    /*1.第一个左上角红色实心矩形*/
    ctx.fillStyle="#f00";
    ctx.fillRect(0,0,100,80);

    /*2.第二个右上角绿色实心矩形*/
    ctx.fillStyle="#0f0";
    ctx.fillRect(400,0,100,80);

    /*3.第三个右下角蓝色实心矩形*/
    ctx.fillStyle="#00f";
    ctx.fillRect(400,320,100,80);

    /*4.第四个左下角黑色实心矩形*/
    ctx.fillStyle="#000