Canvas绘制矩形（四）

最新推荐文章于 2024-08-18 10:07:21 发布

airX嵌入式（微信公众号同名）

最新推荐文章于 2024-08-18 10:07:21 发布

阅读量1k

点赞数

分类专栏： HTML5之Canvas高速入门 HTML5之Canvas高速入门文章标签： fillRect strokeRect fillStyle strokeStyle canvas

本文链接：https://blog.csdn.net/qq_22520215/article/details/84887308

版权

HTML5之Canvas高速入门同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

HTML5之Canvas高速入门

14 篇文章 0 订阅

订阅专栏

函数定义：

context.fillRect(x,y,width,height)

参数x,y表示矩形的左上角位置，参数width，height表示矩形的宽和高，并填充矩形；

context.strokeRect(x,y,width,height)

参数x,y表示矩形的左上角位置，参数width，height表示矩形的宽和高，并勾勒矩形；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" >$(document).ready(function(){
        var  canvas = $("#myCanvas");
        var  context = canvas.get(0).getContext("2d");
        context.fillRect(40,40,100,100);
        context.strokeRect(150,150,100,100);
    })</script>
</head>
<body>

    <canvas id="myCanvas" width="500" height="500" style="background-color: #112233">
        <!-- no no no no -->
    </canvas>

</body>
</html>

如下图：

若想改变颜色，只需在绘画前使用以下语句：

context.fillStyle = "#124278";

填充矩形颜色

context.strokeStyle = "#cca123";

矩形框的颜色

代码如下：

        context.fillStyle = "#124278";
        context.fillRect(40,40,100,100);

        context.strokeStyle = "#cca123";
        context.strokeRect(150,150,100,100);

可以看到效果图如下：