【绘制】HTML5 Canvas 矩形的绘制（API+图文示例说明）

最新推荐文章于 2022-12-19 16:44:34 发布

苏一恒

最新推荐文章于 2022-12-19 16:44:34 发布

阅读量881

点赞数

分类专栏： Canvas系列教程(从入门到精通)【详细解读】文章标签：矩形 canvas fillRect strokeRect clearRect

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/100060912

版权

Canvas系列教程(从入门到精通)【详细解读】专栏收录该内容

59 篇文章 105 订阅

订阅专栏

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

Canvas矩形API

Canvas的API提供了三个方法，分别用于矩形的清除、描边及填充。

矩形的清除、描边与填充

方法描述 clearRect(double x,double y,double w,double h)

清除指定区域像素。前两个参数指位置，后两个参数指宽高。

所谓清除，是将其设置为全透明黑色。

strokeRect(double x,double y,double w,double h)

为矩形描边。

使用如下属性：

strokeStyle
lineWidth
lineJion
miterLimit

如果宽高其中一个为0，则不会绘制任何东西。

fillRect(double x,double y,double w,double h)

填充指定矩形。

如果宽高其中一个为0，则不会绘制任何东西。

演示程序

下面程序使用strokeRect()来绘制左边矩形，使用fillRect()来绘制右边矩形。

演示链接

https://827652549.github.io/Canvas/Unit2/Rectangle.html

效果图

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形的绘制</title>
</head>
<body>
        <canvas id="canvas" width="700" height="500"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    context.lineJoin='round';
    context.lineWidth=30;

    context.font='24px Helvetica';
    context.fillText('点击任何处以擦除',175,40);

    context.strokeRect(75,100,200,200);
    context.fillRect(325,100,200,200);

    context.canvas.onmousedown=function (ev) {
        context.clearRect(0,0,canvas.width,canvas.height);
    }
</script>
</html>

苏一恒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【绘制】HTML5 Canvas 矩形的绘制（API+图文示例说明）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudyCanvas矩形APICanvas的API提供了三个方法，分别用于矩形的清楚、描边及填充。矩形的清除、描边与填充方法描...
复制链接

扫一扫