7.15、HTML5画布（矩形和圆形）

最新推荐文章于 2024-07-25 10:58:55 发布

sh2001824

最新推荐文章于 2024-07-25 10:58:55 发布

阅读量1.2k

点赞数 1

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/sh2001824/article/details/125808563

版权

这篇博客介绍了HTML5 canvas中如何绘制矩形、圆形以及椭圆。通过不同的方法，可以创建默认矩形、填充矩形、只有边框的矩形，以及擦拭效果。同时，讲解了arc()函数画圆的原理，包括半圆和逆时针、顺时针方向的调整。最后，简要提到了椭圆的绘制，强调其与圆形的相似性。

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

1、使用画布画矩形

绘制矩形的方法里面有四个参数（x坐标,y坐标,矩形宽,矩形高）

1.创建一个矩形（默认）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>
</body>
<script type="text/javascript">
    //1.获取一个画布（要创建一个画布对象）
    var canvas = document.getElementById("canvas");
    //2.创建一个画布上下文对象
    var context = canvas.getContext("2d");
    context.rect(0, 0, 200, 200)
    context.stroke();
</script>

</html>

效果图：

2.创建一个被填充的矩形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>
</body>
<script type="text/javascript">
    //1.获取一个画布（要创建一个画布对象）