HTML5培训学习绘制图形2

2017-07-06 10:32:00

1、贝塞尔曲线
贝塞尔曲线有二次和三次的形式,通常用于绘制复杂有规律图案。
(1)二次贝塞尔曲线的使用。
语法:contex.quadraticCurveTo(cp1,cp2,x,y);
二次贝塞尔曲线需要有两个点。第一个点(cp1,cp2)是二次贝塞尔曲线计算中的控制点,第二个点(x,y)是二次贝塞尔曲线的结束点,曲线的开始点为路径的最后一个点,如果路径不在,可以使用beginPath()和moverTo()方法来定义路径开始点。
开始点:moveTo(20,20);
控制点:quadraticCurveTo(20,100,200,20);
束点:quadraticCurveTo(20,100,200,20);

 
 
下面为一个二次贝塞尔曲线画的风车实例,代码如下:









<script type="text/javascript">
var canvas = document.getElementById('curve');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(80,0,50,50);
context.quadraticCurveTo(20,100,100,100);
context.fillStyle = 'goldenrod';
context.fill();
context.beginPath();
context.moveTo(0,100);
context.quadraticCurveTo(0,30,50,50);
context.quadraticCurveTo(100,80,100,0);
context.fillStyle = 'greenyellow';
context.fill();
context.beginPath();
context.moveTo(50,50);
context.lineTo(50,150);
context.strokeStyle = 'red';
context.lineWidth = 2;
context.stroke();
</script>



运行上诉代码,如图。以(0,0)点为开始点,第一笔画的路径绘制出风车左上与右下两个风车叶,结束笔画后再以(0,100)点为起始点,绘制出左下与右上两个风车叶。

 
(2)三次贝塞尔曲线的使用。
语法:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
解释:三次贝塞尔曲线需要三个点,前两个点(cp1x,cp1y)和(cp2x,cp2y)用于三次贝塞尔曲线计算中的控制点,第三个点(x,y)为曲线结束点。曲线的开始点为当前路径的最后一个点,如果路径不在,可以使用 beginPath()和moveTo()方法来定义。
 
 
开始点:moveTo(20,20)
控制点 1:bezierCurveTo(20,100,200,100,200,20)
控制点 2:bezierCurveTo(20,100,200,100,200,20)
结束点:bezierCurveTo(20,100,200,100,200,20)
下面为用三次贝塞尔曲线画出的S形,代码如下:
 









<script type="text/javascript">
var canvas = document.getElementById('bezier');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,0);
context.lineWidth = 2;
context.strokeStyle = 'darkorange';
context.bezierCurveTo(0,0,100,100,50,100);
context.stroke();
</script>



运行代码,这里以(50,0)为起点,控制点1为(0,0),控制点2为(100,100),结束点为(50,100)。注:Internet8或以前版本的浏览器不支持元素。

iOS QQ群

HTML5 QQ群

飞雀动态

行业新闻

Copyright © 2015-2016 Future education technology co., LTD All Rights Reserved