绘制七星瓢虫的代码讲解
js代码：
// JavaScript Document
var cav = document.getElementById("cav").getContext("2d");
cav.beginPath(); //body
cav.fillStyle = "#DC1534";
cav.moveTo(130, 90); //设置起点
//贝塞尔三次曲线绘制瓢虫身体
cav.bezierCurveTo(90, 100, 90, 170, 130, 180); //left
cav.bezierCurveTo(170, 170, 170, 100, 130, 90); //right
cav.fill();
cav.beginPath(); //head
cav.lineWidth = 3;
cav.moveTo(115, 99)
//贝塞尔三次曲线绘制瓢虫头部
cav.bezierCurveTo(120, 70, 139, 70, 145, 99);
cav.stroke();
cav.beginPath(); //feeler-left
cav.moveTo(125, 80)
cav.quadraticCurveTo(115, 55, 110, 75);
cav.stroke();
cav.beginPath(); //feeler-right
cav.moveTo(135, 80)
cav.quadraticCurveTo(145, 55, 150, 75);
cav.stroke();
circle(130, 130, 10, 130, 90, 130, 180); //center
circle(115, 115, 5, 105, 115, 90, 100); //left-top
circle(110, 140, 5, 100, 135, 85, 130); //left-center
circle(115, 160, 5, 105, 155, 90, 170); //left-bottom
circle(145, 115, 5, 155, 115, 170, 100); //right-top
circle(150, 140, 5, 160, 135, 175, 130); //right-center
circle(145, 160, 5, 155, 155, 170, 170); //right-bottom
//x,y,r为七星瓢虫背部的圆圈的圆心和半径,x1,y1,x2,y2为绘制昆虫六只脚的起点和终点
function circle(x, y, r, x1, y1, x2, y2) { //ciecle
cav.beginPath(); //绘制七星瓢虫背部的圆圈
cav.strokeStyle = "#b28335";
cav.fillStyle = "#000";
cav.arc(x, y, r, 0, Math.PI * 2, true);
cav.fill();
cav.stroke();
cav.beginPath(); //绘制直线实现七星瓢虫脚
cav.strokeStyle = "#000";
cav.lineWidth = 3;
cav.moveTo(x1, y1);
cav.lineTo(x2, y2);
cav.stroke();
}html代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>绘制七星瓢虫</title> </head> <link href="css/css2.css" type="text/css" rel="stylesheet"> <body> <div class="mr-cont"> <canvas id="cav" height="300" width="300"></canvas> </div> </body> <script type="text/javascript" src="js/js2.js"></script> </html>
css代码：
@charset "utf-8";
/* CSS Document */
.mr-cont{
border: 1px solid #f00;
margin: 20px auto;
height: 240px;
width: 250px;
}js代码逐行讲解：
var cav = document.getElementById("cav").getContext("2d");这行代码获取了 HTML 中 ID 为 "cav" 的 canvas 元素，并获取其 2D 渲染上下文，用于后续的绘图操作
cav.beginPath(); //body
开始一个新的路径绘制，用于绘制瓢虫的身体部分。
cav.fillStyle = "#DC1534";
设置填充颜色为红色（#DC1534），用于填充瓢虫身体。
cav.moveTo(130, 90); //设置起点
将绘制起点设置在坐标 (130, 90)。
//贝塞尔三次曲线绘制瓢虫身体cav.bezierCurveTo(90, 100, 90, 170, 130, 180); //left
使用三次贝塞尔曲线绘制身体左侧部分，控制点为 (90, 100) 和 (90, 170)，终点为 (130, 180)。
cav.bezierCurveTo(170, 170, 170, 100, 130, 90); //right
继续使用三次贝塞尔曲线绘制身体右侧部分，控制点为 (170, 170) 和 (170, 100)，终点回到起点 (130, 90)。
cav.fill();
填充刚才绘制的身体路径。
cav.beginPath(); //head
开始一个新的路径绘制，用于绘制瓢虫头部。
cav.lineWidth = 3;
设置线条宽度为 3 像素。
cav.moveTo(115, 99)
将绘制起点设置在坐标 (115, 99)。
//贝塞尔三次曲线绘制瓢虫头部cav.bezierCurveTo(120, 70, 139, 70, 145, 99);
使用三次贝塞尔曲线绘制瓢虫头部，控制点为 (120, 70) 和 (139, 70)，终点为 (145, 99)。
cav.stroke();
绘制并显示头部的轮廓线。
cav.beginPath(); //feeler-left
开始一个新的路径绘制，用于绘制左触角。
cav.moveTo(125, 80)
将绘制起点设置在坐标 (125, 80)。
cav.quadraticCurveTo(115, 55, 110, 75);
使用二次贝塞尔曲线绘制左触角，控制点为 (115, 55)，终点为 (110, 75)。
cav.stroke();
绘制并显示左触角。
cav.beginPath(); //fealer-right
开始一个新的路径绘制，用于绘制右触角。
cav.moveTo(135, 80)
将绘制起点设置在坐标 (135, 80)。
cav.quadraticCurveTo(145, 55, 150, 75);
使用二次贝塞尔曲线绘制右触角，控制点为 (145, 55)，终点为 (150, 75)。
cav.stroke();
绘制并显示右触角。
circle(130, 130, 10, 130, 90, 130, 180); //center
调用 circle 函数绘制中心斑点，圆心为 (130, 130)，半径为 10，并绘制连接中心和身体的脚。
circle(115, 115, 5, 105, 115, 90, 100); //left-top
调用 circle 函数绘制左上角斑点，圆心为 (115, 115)，半径为 5，并绘制连接该点和身体的脚。
circle(110, 140, 5, 100, 135, 85, 130); //left-center
调用 circle 函数绘制左中部斑点，圆心为 (110, 140)，半径为 5，并绘制连接该点和身体的脚。
circle(115, 160, 5, 105, 155, 90, 170); //left-bottom
调用 circle 函数绘制左下角斑点，圆心为 (115, 160)，半径为 5，并绘制连接该点和身体的脚。
circle(145, 115, 5, 155, 115, 170, 100); //right-top
调用 circle 函数绘制右上角斑点，圆心为 (145, 115)，半径为 5，并绘制连接该点和身体的脚。
circle(150, 140, 5, 160, 135, 175, 130); //right-center
调用 circle 函数绘制右中部斑点，圆心为 (150, 140)，半径为 5，并绘制连接该点和身体的脚。
circle(145, 160, 5, 155, 155, 170, 170); //right-bottom
调用 circle 函数绘制右下角斑点，圆心为 (145, 160)，半径为 5，并绘制连接该点和身体的脚。
//x,y,r为七星瓢虫背部的圆圈的圆心和半径,x1,y1,x2,y2为绘制昆虫六只脚的起点和终点
function circle(x, y, r, x1, y1, x2, y2) { //ciecle定义一个 circle 函数，用于绘制斑点和脚。
cav.beginPath(); //绘制七星瓢虫背部的圆圈
开始一个新的路径绘制，用于绘制斑点。
cav.strokeStyle = "#b28335";
设置描边颜色为棕色 (#b28335)。
cav.fillStyle = "#000";
设置填充颜色为黑色。
cav.arc(x, y, r, 0, Math.PI * 2, true);
绘制一个圆形，圆心为 (x, y)，半径为 r，从 0 弧度到 2π 弧度，逆时针方向。
cav.fill();
填充圆形。
cav.stroke();
绘制圆形的边框。
cav.beginPath(); //绘制直线实现七星瓢虫脚
开始一个新的路径绘制，用于绘制脚。
cav.strokeStyle = "#000";
设置描边颜色为黑色。
cav.lineWidth = 3;
设置线条宽度为 3 像素。
cav.moveTo(x1, y1);
将绘制起点设置在 (x1, y1)。
cav.lineTo(x2, y2);
从起点绘制一条直线到终点 (x2, y2)。
cav.stroke();
绘制脚。