如何利用canvas画一个圆，并且填充颜色_canvas画圆并填充颜色

作者：你好赵伟 | 2024-03-17 05:52:05

踩

canvas画圆并填充颜色

如何利用canvas画一个圆，并且填充颜色（小白专用，大佬勿看）

canvas基础

相信在此之前，你对canvas已经有一定的了解了，接下来我将介绍，如何利用canvas画一个圆。

1、新建一个html模板，我用的编辑环境是Visual Studio Code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用canvas画一个圆</title>
</head>
<body>
    
</body>

<script type="text/javascript">
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、在body里面创建一个canvas标签，也就是设置一块画布：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用canvas画一个圆</title>
</head>
<body>
  <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
        当前浏览器不支持 canvas
    </canvas>
<!--如果当前浏览器不支持canvas则会输出提示信息： 当前浏览器不支持canvas-->
</body>

<script>

</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3、再编辑js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用canvas画一个圆</title>
</head>
<body>
    <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
        当前浏览器不支持 canvas
    </canvas>
<!--如果当前浏览器不支持canvas则会输出提示信息： 当前浏览器不支持canvas-->
</body>

<script>
//1.获取 canvas 元素对应的 DOM 对象
var c=document.getElementById("canvas_1");

//2.获取在 canvas 上绘图的 canvasRenderingContent2D 对象。这两行是必不可少的哦
var ctx=c.getContext("2d");

//3.绘制
ctx.beginPath();//开始绘制
ctx.arc(95,50,40,0,2*Math.PI);//arc 的意思是“弧”
ctx.strokeStyle="blue";//将线条颜色设置为蓝色
ctx.stroke();//stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3、效果图：

在这里插入图片描述

4-1、填充一个颜色，加上：

//3.绘制
ctx.beginPath();//开始绘制
ctx.arc(95,50,40,0,2*Math.PI);//arc 的意思是“弧”
ctx.fillStyle="#ff0";//设置填充颜色
ctx.fill();//开始填充
ctx.strokeStyle="blue";//将线条颜色设置为蓝色
ctx.stroke();//stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
1
2
3
4
5
6
7

4-2.填充颜色后的效果：

在这里插入图片描述

5、难点讲解，相信小白看了之后，对ctx.arc(100,100,80,0,2*Math.PI);这里有点不解。可以看W3school的介绍一看就懂

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/254397