<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制五角星</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid black">
</canvas>
<script >
var canvas=document.getElementById('canvas');
// 设置宽和高
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
// 获取对象来绘制图形
draw(context,300,150,400,400)
// 传参
function draw(cxt,R,r,X,Y){//构造函数
context.beginPath();//封装一个开始的方法
for (var i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+X,-Math.sin((18+i*72)/180*Math.PI)*R+Y);
// 设定大圆半径和五角星之间的关系
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+X,-Math.sin((54+i*72)/180*Math.PI)*r+Y);
// 设定小圆和五角星之间的关系
}
context.closePath();
// 设置一个关闭的状态
context.stroke();
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制五角星</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid black">
</canvas>
<script >
var canvas=document.getElementById('canvas');
// 设置宽和高
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
// 获取对象来绘制图形
draw(context,300,150,400,400)
// 传参
function draw(cxt,R,r,X,Y){//构造函数
context.beginPath();//封装一个开始的方法
for (var i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+X,-Math.sin((18+i*72)/180*Math.PI)*R+Y);
// 设定大圆半径和五角星之间的关系
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+X,-Math.sin((54+i*72)/180*Math.PI)*r+Y);
// 设定小圆和五角星之间的关系
}
context.closePath();
// 设置一个关闭的状态
context.stroke();
}
</script>
</body>
</html>
1159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
