Canvas基础教程(章节3)

我不是费圆

发布于 2020-10-10 09:38:14

4210

发布于 2020-10-10 09:38:14

文章被收录于专栏：鲸鱼动画

这节主讲 Canvas 绘制贝塞尔曲线，首先我们要了解什么是贝塞尔曲线？

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop 等。在Flash4 中还没有完整的曲线工具，而在Flash5 里面已经提供出贝塞尔曲线工具。

贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre

Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

啊，行了！视力不好就不要继续往下读了，来看图片吧！

一次贝塞尔曲线：

简单说就是一条直线。

二次贝塞尔曲线：

解释图：

红色的曲线才是形成的贝塞尔曲线。

三次贝赛尔曲线：

解释图：

红色的曲线才是贝塞尔曲线，可以看到它的弧度跟三条直线有关。

我这么通俗的解释应该都看懂了，让我们瞧瞧 Canvas 是如何绘制贝塞尔曲线的。

绘制二次贝塞尔曲线：

quadraticCurveTo(cp1x, cp1y, x, y):

参数1 和 2 控制：控制点坐标；

参数3 和 4 控制：终点坐标。

我们来做一个小小的案例：

<html>
<head>
<title>Canvas 基础</title>
<style>
	canvas{
		border: 1px solid black;
	}
</style>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		
		ctx.beginPath();
		ctx.moveTo(10,200);//起始点
		var cp1x =40, cp1y =100;//控制点
		var x =200, y =200;// 结束点

		//绘制二次贝塞尔曲线
		ctx.quadraticCurveTo(cp1x, cp1y, x, y); 
		ctx.stroke();
		ctx.beginPath(); 
		ctx.rect(10,200,10,10); 
		ctx.rect(cp1x, cp1y,10,10); 
		ctx.rect(x, y,10,10); 
		ctx.fill();
	}()
</script>
</html>

通过我们的仔细观察，不难看出，起点、终点固定，曲线的弧度完全是由控制点决定的，如图：

聪明如你，我们来看三次贝塞尔曲线：

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：

参数1 和 2 控制：控制点坐标；

参数3 和 4 控制：控制点2的坐标；

参数5 和 6 控制：终点的坐标。

结合案例：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		
		ctx.beginPath();
		ctx.moveTo(40,200);//起始点
		var cp1x =20, cp1y =100;//控制点1 
		var cp2x =100, cp2y =120;//控制点2 
		var x =200, y =200;// 结束点
		//绘制三次贝塞尔曲线
		ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 
		ctx.stroke();
		ctx.beginPath(); 
		ctx.rect(40,200,10,10); 
		ctx.rect(cp1x, cp1y,10,10); 
		ctx.rect(cp2x, cp2y,10,10); 
		ctx.rect(x, y,10,10); 
		ctx.fill();
	}()
</script>
</html>

看下控制点2的效果：

给贝塞尔曲线染色：

fillStyle = color 设置图形的填充颜色;

strokeStyle = color 设置图形轮廓的颜色。

注：

1.color 可以是表示 css 颜色值的字符串、渐变对象或者图案对象。

2.默认情况下，线条和填充颜色都是黑色。

3.一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或strokeStyle 的值。

就比如：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		
		for(var i =0; i <6; i++){
		  for(var j =0; j <6; j++){
			ctx.fillStyle ='rgb('+ Math.floor(255-42.5* i)+',0,'+ Math.floor(255-42.5* j)+')';
			ctx.fillRect(j *50, i *50,50,50);
		  }
		}
	}()
</script>
</html>

效果图如下：

渐变的颜色块，好看吗？

我们来做一个更有趣的！假设这些块快颜色是随机的，就好像：

那你得这样：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		
		for(var i =0; i <6; i++){
		  for(var j =0; j <6; j++){
			ctx.strokeStyle =`rgb(${randomInt(0,255)},${randomInt(0,255)},${randomInt(0,255)})`; 
			ctx.strokeRect(j *50, i *50,40,40);
		  }
		}
		function randomInt(from, to){
		return parseInt(Math.random()*(to -from+1)+from);
		}
	}()
</script>
</html>

我在底部定义了函数 randomInt 意为随机整数，请不要遗漏了它。

然后我在想，有没有透明属性呢？

当然，rgba 不算吗?

oh no！我指定是 Canvas 透明属性。

transparency( 透明度 )

globalAlpha = transparencyValue

这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用rgba()设置透明度更加好一些。

这个知识点并不重要，但直接跳过的话应该不合适吧？

先弄几个小方块出来吧！

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		
		ctx.fillStyle="red";
		ctx.fillRect(20,20,75,50);
		ctx.fillStyle="blue";
		ctx.fillRect(50,50,75,50);
		ctx.fillStyle="green";
		ctx.fillRect(80,80,75,50);
	}()
</script>
</html>

我们得到了这样三个图案:

加上透明度，就在

在哪都可以，加在不同的地方所起到的影响各不相同

什么？你说看不清代码

问我要啊！代码又不要钱

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		
		ctx.globalAlpha=0.2;
		ctx.fillStyle="red";
		ctx.fillRect(20,20,75,50);
		ctx.fillStyle="blue";
		ctx.fillRect(50,50,75,50);
		ctx.fillStyle="green";
		ctx.fillRect(80,80,75,50);
	}()
</script>
</html>

所以我们很容易就看出了：

当透明度放在顶部时，影响全局，对整张 Canvas 画布生效；

当透明度放在某一块儿元素之下时，仅对其及以下元素生效，对其之前的元素均不生效；

当透明度放在函数尾部时，没有任何意义。代码不是按行收费的，为了优化请删掉它。

Canvas 的路还有很长，别担心我陪你一同度过。如果前 3 章你都看完了，恭喜你已经可以看懂这个了：

“ 链接在此 ”