版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
code
<!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>
