创作不易小li哭泣请大家留个赞评个论再偷走我呕心沥血的代码吧~~~
下面是效果图
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500px" height="500px">你的浏览器不支持canvas,请升级浏览器</canvas>
<script>
// 1.获取canvas元素
var myCanvas = document.getElementById('myCanvas');
// 2.创建画布对象 getContext('2d') 2d 上下文对象
var context = myCanvas.getContext('2d');
// 画圆
context.beginPath();
context.strokeStyle = '#000';
context.arc(200,200,100,0,Math.PI*2);
context.closePath();
context.stroke();
// 左边半圆 填充
context.beginPath();
context.arc(200,200,100,Math.PI/2,Math.PI*3/2);
context.closePath();
context.fill();
// 上面的小圆
context.beginPath();
context.arc(200,150,50,0,Math.PI*2);
context.closePath();
context.fill();
// 下面的小圆
context.beginPath();
context.fillStyle = "#fff";
context.arc(200,250,50,0,Math.PI*2);
context.closePath();
context.fill();
// 上面的小圆中的小圆
context.beginPath();
context.fillStyle = "#fff";
context.arc(200,150,20,0,Math.PI*2);
context.closePath();
context.fill();
// 下面的小圆中的小圆
context.beginPath();
context.fillStyle = "#000";
context.arc(200,250,20,0,Math.PI*2);
context.closePath();
context.fill();
</script>
</body>
</html>