应用canvas绘图贝塞尔曲线图

日期:2021-02-25 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

1、2次贝塞尔曲线图

  quadraticCurveTo(cpx,cpy,x,y)  //cpx,cpy表明操纵点的座标,x,y表明终点站座标;

数学课公式表明以下:

2次方贝兹曲线图的相对路径由给定点P0、P1、P2的涵数B(t)跟踪:

编码案例:


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<title>canvas平行线</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body, h1{margin:0;}
canvas{margin: 20px;}
</style>
</head>
<body onload="draw()">
<h1>2次贝塞尔曲线图</h1>
<canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//绘图起止点、操纵点、终点站
context.beginPath();
context.moveTo(20,170);
context.lineTo(130,40);
context.lineTo(180,150);
context.stroke(); </p> <p> //绘图2次贝塞尔曲线图
context.beginPath();
context.moveTo(20,170);
context.quadraticCurveTo(130,40,180,150);
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>
</html>

编码实际效果:

2、3次贝塞尔曲线图

  bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  //cp1x,cp1y表明第1个操纵点的座标,cp2x,cp2y表明第2个操纵点的座标,x,y表明终点站的座标;

数学课公式表明以下:

P0、P1、P2、P34个点在平面或在3维室内空间中界定了3次方贝兹曲线图。曲线图起止于P0走向P1,并从P2的方位来到P3。1般不容易历经P1或P2;这两个点只是在那里出示方位资讯。P0和P1之间的间隔,决策了曲线图在转而趋进P3以前,走向P2方位的“长度有多长”。

编码案例:


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<title>canvas平行线</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body, h1{margin:0;}
canvas{margin: 20px; }
</style>
</head>
<body onload="draw()">
<h1>3次贝塞尔曲线图</h1>
<canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//绘图起止点、操纵点、终点站
context.beginPath();
context.moveTo(25,175);
context.lineTo(60,80);
context.lineTo(150,30);
context.lineTo(170,150);
context.stroke(); </p> <p> //绘图3次贝塞尔曲线图
context.beginPath();
context.moveTo(25,175);
context.bezierCurveTo(60,80,150,30,170,150);
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>
</html>

编码实际效果图:

是否很酷炫的实际效果。。。HTML5+canvas简直个好玩的物品,上瘾了。