该功能实现需要用到 bootstrap库中的 css样式,
参考官网为:下载 Bootstrap · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
一、代码区域
<title>Document</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<style></style>
</head>
<body>
<canvas id="canvas" class="bg-success"></canvas>
<script>
// 获取canvas对象
var canvas = document.getElementById("canvas");
var obj = {
x: 250, y: 250,
w: 100, h: 100,
r: 50
}
// 设置画布尺寸
canvas.width = 600;
canvas.height = 600;
// 获取绘制图形图像的对象 (画笔)
var pen = canvas.getContext("2d");
// 1.先画一个矩形
var drawRect = function (x, y, w, h, color = "red") {
pen.beginPath();
pen.fillStyle = color;
pen.fillRect(x, y, w, h);
pen.closePath();
}
// 2.画圆
var drawCircle = function (x, y, r, begin, end, color = "red") {
pen.beginPath();
pen.fillStyle = color;
pen.arc(
x, y, r,
begin * Math.PI / 180,
end * Math.PI / 180,
true
)
pen.closePath();
pen.fill();
}
drawRect(
obj.x,
obj.y,
obj.w,
obj.h,
)
drawCircle(
obj.x + 50,
obj.y,
obj.r,
0,
360
)
drawCircle(
obj.x,
obj.y + 50,
obj.r,
0,
360
)
</script>
</body>
二、代码效果预览
注: 博主每天记录自己所学,如有写的不好之处,希望您能不吝赐教,给我一些关于这个项目的意见和建议。各位的宝贵意见将对我产生深远的影响,我将认真倾听并尽力改进。谢谢各位~~