闲来玩十三水规律|十三水马牌赢了怎么算|

二次贝赛尔曲线绘制



二次贝赛尔曲线怎么用


HTML5-1.png


1) 这里有开始点(20,20),控制点(20,100),结束点(200,20)。

2) 这个就是拿两条线来确定一个弧线,但是这个弧线。之前我们学过两条切线中间的这个是圆,圆的话是要指定半径的。这个地方是不用半径来控制一条线。



代码演示:二次贝赛尔曲线的使用


如何确定方法参数坐标点?


1) 比如说,我们的第一个点在这里,200*200的位置


HTML5-4.png


2) 然后再是这样的两个点,坐标分别是260,60和300,300


HTML5-5.png


3)保存运行,这样就绘制出了一条二次贝赛尔曲线


HTML5-6.png



代码

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="JavaScript">
function init()
{
var can=document.getElementById("can");
var ctx=can.getContext("2d");
            ctx.beginPath();
ctx.moveTo(100,60);
ctx.moveTo(20,20)
ctx.bezierCurveTo(20,100,300,100,300,20)
//ctx.bezierCurveTo(20,100,200,100,200,20)
//ctx.bezierCurveTo(20,100,200,100,200,20)
ctx.moveTo(200,200)
ctx.quadraticCurveTo(260,60,300,300);
//结束点:quadraticCurveTo(20,100,200,20)
               ctx.closePath();
               ctx.lineWidth=5;
               ctx.strokeStyle="orange";
               ctx.stroke();
}
</script>
</head>
<body onload="init();">
<canvas id="can" width="400" height="300" style="border: 1px #000 solid;"></canvas>
</body>
</html>



二次贝赛尔曲线出现的原理


1.  先是移动到了这个200,200的点。


HTML5-7.png


2. 其次,这个是260,60的点


HTML5-8.png


3. 最后这个就是300,300的点了。
HTML5-9.png


4. 然后这样点与点之间相连接成的线段,里面的弧线就与这两条线段相切,就构成了这条弧线了


HTML5-10.png


我们前面学过的相切线,前面学过的类似是,两条线中间画一个圆


HTML5-11.png



这是圆,需要指定半径的。而这个二次贝赛尔曲线是没有指定弧的半径的。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 www.znlucv.tw
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
极速快三投注技巧 老时时彩历史数据 广东彩票app假的吗 快3助手 飞艇非凡计划软件手机软件 极速赛车双面盘是什么 时彩选号技巧规律 好用的时时彩计划软件 pc28赚钱 北京计划赛车计划软件