canvas绘制二次贝塞尔曲线（利用二次贝塞尔曲线绘制图形）
程序员文章站
2023-12-27 09:22:27
...
1.利用二次贝塞尔曲线绘制图形展示：
2.代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
<style>
#myc{border: 0px solid #000 ;display: block;margin: auto;}
div{text-shadow: 5px 5px 3px #999999;font-size: 3em;
font-family: "华文琥珀"; margin:auto;text-align:center;}
</style>
</head>
<body >
<div>LOGO</div>
<canvas id="myc"></canvas>
<script>
var c=document.getElementById("myc");
c.width=500;
c.height=500;
var ctx=c.getContext("2d");
//橙黄色背景部分
var x=50,y=100, x1=x+50,y1=y+350, x2=x1+350,y2=y1+50, x3=x+450,y3=y-50
ctx.lineWidth=2;
ctx.strokeStyle="rgba(100%,50%,0%,1)";
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.fillStyle="#FF8E20";
ctx.fill();
ctx.closePath();
//叶子装饰部分
var x=0,y=200,x1=230,y1=350;
ctx.beginPath();
ctx.lineWidth=2;
ctx.strokeStyle="#c00";
ctx.moveTo(x,y);
ctx.quadraticCurveTo(x+80,y+200,x1,y1);
ctx.moveTo(x,y);
ctx.quadraticCurveTo(x+180,y-40,x1,y1);
ctx.stroke();
ctx.fillStyle="#57D84D";
ctx.fill();
ctx.closePath();
var x2=170,y2=0,x3=250,y3=300;
ctx.beginPath();
ctx.lineWidth=2;
ctx.strokeStyle="#c00";
ctx.moveTo(x2,y2);
ctx.quadraticCurveTo(x2+200,y2+200,x3,y3);
ctx.moveTo(x2,y2);
ctx.quadraticCurveTo(x2-40,y2+250,x3,y3);
ctx.stroke();
ctx.fillStyle="#57D84D";
ctx.fill();
ctx.closePath();
var x4=480,y4=100,x5=280,y5=350,h=200,w=200;
ctx.beginPath();
ctx.lineWidth=2;
ctx.strokeStyle="#c00";
ctx.moveTo(x4,y4);
ctx.quadraticCurveTo(x4-190,y4+40,x5,y5);
ctx.moveTo(x4,y4);
ctx.quadraticCurveTo(x4-10,y4+250,x5,y5);
ctx.stroke();
ctx.fillStyle="#57D84D";
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
3.效果的展示
注：图像是在网上找的，代码是自己写的。