如何利用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>
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>
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>
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() 方法默认颜色是黑色(如果没有上面一行,则会是黑色)。
4-2.填充颜色后的效果:
5、难点讲解,相信小白看了之后,对ctx.arc(100,100,80,0,2*Math.PI);这里有点不解。可以看W3school的介绍一看就懂