Canvas--画一个圆

最新推荐文章于 2023-02-17 17:09:00 发布

_冷月心

最新推荐文章于 2023-02-17 17:09:00 发布

阅读量1.9k

点赞数 2

分类专栏： js+css 文章标签： Canvas--画一个圆

本文链接：https://blog.csdn.net/qq_42813491/article/details/102681300

版权

js+css 专栏收录该内容

162 篇文章 3 订阅

订阅专栏

code

学习资源推荐

微信扫码关注公众号：前端前端大前端，追求更精致的阅读体验，一起来学习啊
关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程

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

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

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById("canvas");//获取canvas对象
        canvas.style.background = "#000";//设置背景色
        var context = canvas.getContext("2d");//获取上下文对象
        const { PI } = Math;//获取常量 PI ，绘制圆用
		//clear before path, start create
		// no path ,stroke() and  fill()  is useless
        context.beginPath();
        //x y 圆心 半径 开始弧度 结束弧度 逆时针  (默认false 顺时针)
        context.arc(100, 100, 50, 0, 2 * PI, true);
        context.closePath();//创建从当前点到开始点的路径
        context.fillStyle = '#fff';//设置填充样式
        context.fill();//填充--默认黑色
    </script>
</body>

</html>

效果图

在这里插入图片描述

参照

在这里插入图片描述

扩展

将上边半径50改为1就是一个点
使用阴影和模糊程度画月亮

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

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

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        canvas.style.background = "#000";
        var context = canvas.getContext("2d");
        const { PI } = Math;
        context.beginPath();
        context.arc(100, 100, 50, 0, 2 * PI, false);
        context.fillStyle = '#fff';
        context.shadowBlur = 20;//模糊程度
        context.shadowColor = '#fff';//阴影颜色 
        context.fill()

    </script>
</body>

</html>