这节主讲 Canvas 绘制贝塞尔曲线&＃xff0c;首先我们要了解 什么是贝塞尔曲线&＃xff1f;
贝塞尔曲线(Bézier curve)&＃xff0c;又称贝兹曲线或贝济埃曲线&＃xff0c; 是应用于二维图形应用程序的数学曲线。
一般的矢量图形软件通过它来精确画出曲线&＃xff0c;贝兹曲线由线段与节点组成&＃xff0c;节点是可拖动的支点&＃xff0c;线段像可伸缩的皮筋&＃xff0c;我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
贝塞尔曲线是计算机图形学中相当重要的参数曲线&＃xff0c;在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop 等。在Flash4 中还没有完整的曲线工具&＃xff0c;而在Flash5 里面已经提供出贝塞尔曲线工具。
贝塞尔曲线于1962&＃xff0c;由法国工程师皮埃尔·贝塞尔&＃xff08;Pierre
Bézier&＃xff09;所广泛发表&＃xff0c;他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发&＃xff0c;以稳定数值的方法求出贝兹曲线。
啊&＃xff0c;行了&＃xff01;视力不好就不要继续往下读了&＃xff0c;来看图片吧&＃xff01;
一次贝塞尔曲线&＃xff1a;
简单说就是一条直线。
二次贝塞尔曲线&＃xff1a;
解释图&＃xff1a;
红色的曲线才是形成的贝塞尔曲线。
三次贝赛尔曲线&＃xff1a;
解释图&＃xff1a;
红色的曲线才是贝塞尔曲线&＃xff0c;可以看到它的弧度跟三条直线有关。
我这么通俗的解释应该都看懂了&＃xff0c;让我们瞧瞧 Canvas 是如何绘制贝塞尔曲线的。
绘制二次贝塞尔曲线&＃xff1a;
quadraticCurveTo(cp1x, cp1y, x, y):
参数1 和 2 控制&＃xff1a; 控制点坐标&＃xff1b;
参数3 和 4 控制&＃xff1a; 终点坐标。
我们来做一个小小的案例&＃xff1a;
<html>
<head>
<title>Canvas 基础title>
<style>canvas{border: 1px solid black;}
style>
head>
<body><canvas id&＃61;"canvas" width&＃61;"300" height&＃61;"300">canvas>
body>
<script>!function(){var canvas &＃61; document.getElementById(&＃39;canvas&＃39;);if(!canvas.getContext) return;var ctx &＃61;canvas.getContext("2d");ctx.beginPath();ctx.moveTo(10,200);var cp1x &＃61;40, cp1y &＃61;100;var x &＃61;200, y &＃61;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>
通过我们的仔细观察&＃xff0c;不难看出&＃xff0c;起点、终点固定&＃xff0c;曲线的弧度完全是由控制点决定的&＃xff0c;如图&＃xff1a;
聪明如你&＃xff0c;我们来看三次贝塞尔曲线&＃xff1a;
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)&＃xff1a;
参数1 和 2 控制&＃xff1a; 控制点坐标&＃xff1b;
参数3 和 4 控制&＃xff1a; 控制点2的坐标&＃xff1b;
参数5 和 6 控制&＃xff1a; 终点的坐标。
结合案例&＃xff1a;
<body><canvas id&＃61;"canvas" width&＃61;"300" height&＃61;"300">canvas>
body>
<script>!function(){var canvas &＃61; document.getElementById(&＃39;canvas&＃39;);if(!canvas.getContext) return;var ctx &＃61;canvas.getContext("2d");ctx.beginPath();ctx.moveTo(40,200);var cp1x &＃61;20, cp1y &＃61;100;var cp2x &＃61;100, cp2y &＃61;120;var x &＃61;200, y &＃61;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的效果&＃xff1a;
给贝塞尔曲线染色&＃xff1a;
fillStyle &＃61; color 设置图形的填充颜色;
strokeStyle &＃61; color 设置图形轮廓的颜色。
注&＃xff1a;
1.color 可以是表示 css 颜色值的字符串、渐变对象或者图案对象。
2.默认情况下&＃xff0c;线条和填充颜色都是黑色。
3.一旦您设置了 strokeStyle 或者 fillStyle 的值&＃xff0c;那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色&＃xff0c;你需要重新设置 fillStyle 或strokeStyle 的值。
就比如&＃xff1a;
<body><canvas id&＃61;"canvas" width&＃61;"300" height&＃61;"300">canvas>
body>
<script>!function(){var canvas &＃61; document.getElementById(&＃39;canvas&＃39;);if(!canvas.getContext) return;var ctx &＃61;canvas.getContext("2d");for(var i &＃61;0; i <6; i&＃43;&＃43;){for(var j &＃61;0; j <6; j&＃43;&＃43;){ctx.fillStyle &＃61;&＃39;rgb(&＃39;&＃43; Math.floor(255-42.5* i)&＃43;&＃39;,0,&＃39;&＃43; Math.floor(255-42.5* j)&＃43;&＃39;)&＃39;;ctx.fillRect(j *50, i *50,50,50);}}}()
script>
html>
效果图如下&＃xff1a;
渐变的颜色块&＃xff0c;好看吗&＃xff1f;
我们来做一个更有趣的&＃xff01;假设这些块快颜色是随机的&＃xff0c;就好像&＃xff1a;
那你得这样&＃xff1a;
<body><canvas id&＃61;"canvas" width&＃61;"300" height&＃61;"300">canvas>
body>
<script>!function(){var canvas &＃61; document.getElementById(&＃39;canvas&＃39;);if(!canvas.getContext) return;var ctx &＃61;canvas.getContext("2d");for(var i &＃61;0; i <6; i&＃43;&＃43;){for(var j &＃61;0; j <6; j&＃43;&＃43;){ctx.strokeStyle &＃61;&＃96;rgb(${randomInt(0,255)},${randomInt(0,255)},${randomInt(0,255)})&＃96;; ctx.strokeRect(j *50, i *50,40,40);}}function randomInt(from, to){return parseInt(Math.random()*(to -from&＃43;1)&＃43;from);}}()
script>
html>
我在底部定义了函数 randomInt 意为随机整数&＃xff0c;请不要遗漏了它。
然后我在想&＃xff0c;有没有透明属性呢&＃xff1f;
当然&＃xff0c;rgba 不算吗?
oh no&＃xff01;我指定是 Canvas 透明属性。
transparency( 透 明 度 )
globalAlpha &＃61; transparencyValue
这个属性影响到 canvas 里所有图形的透明度&＃xff0c;有效的值范围是 0.0 &＃xff08;完全透明&＃xff09;到 1.0&＃xff08;完全不透明&＃xff09;&＃xff0c;默认是 1.0。
globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过&＃xff0c;我认为使用rgba()设置透明度更加好一些。
这个知识点并不重要&＃xff0c;但直接跳过的话应该不合适吧&＃xff1f;
先弄几个小方块出来吧&＃xff01;
<body><canvas id&＃61;"canvas" width&＃61;"300" height&＃61;"300">canvas>
body>
<script>!function(){var canvas &＃61; document.getElementById(&＃39;canvas&＃39;);if(!canvas.getContext) return;var ctx &＃61;canvas.getContext("2d");ctx.fillStyle&＃61;"red";ctx.fillRect(20,20,75,50);ctx.fillStyle&＃61;"blue";ctx.fillRect(50,50,75,50);ctx.fillStyle&＃61;"green";ctx.fillRect(80,80,75,50);}()
script>
html>
我们得到了这样三个图案:
加上透明度&＃xff0c;就在
在哪都可以&＃xff0c;加在不同的地方所起到的影响各不相同
什么&＃xff1f;你说看不清代码
问我要啊&＃xff01;代码又不要钱
<body><canvas id&＃61;"canvas" width&＃61;"300" height&＃61;"300">canvas>
body>
<script>!function(){var canvas &＃61; document.getElementById(&＃39;canvas&＃39;);if(!canvas.getContext) return;var ctx &＃61;canvas.getContext("2d");ctx.globalAlpha&＃61;0.2;ctx.fillStyle&＃61;"red";ctx.fillRect(20,20,75,50);ctx.fillStyle&＃61;"blue";ctx.fillRect(50,50,75,50);ctx.fillStyle&＃61;"green";ctx.fillRect(80,80,75,50);}()
script>
html>
所以我们很容易就看出了&＃xff1a;
当透明度放在顶部时&＃xff0c;影响全局&＃xff0c;对整张 Canvas 画布生效&＃xff1b;
当透明度放在某一块儿元素之下时&＃xff0c;仅对其及以下元素生效&＃xff0c;对其之前的元素均不生效&＃xff1b;
当透明度放在函数尾部时&＃xff0c;没有任何意义。代码不是按行收费的&＃xff0c;为了优化请删掉它。
Canvas 的路还有很长&＃xff0c;别担心我陪你一同度过。如果前 3 章你都看完了&＃xff0c;恭喜你已经可以看懂这个了&＃xff1a;
“ 链接在此 ”
假设你还参悟不透&＃xff0c;那就看看第四章&＃xff0c;反正又不要钱&＃xff01;我是 “ 我不是费圆 ”&＃xff0c;一个勤快的程序员。
前端的学习不是一蹴而就&＃xff0c;不积跬步无以至千里&＃xff0c;不积小流无以成江海。持续不断的努力才能让你我有所收获&＃xff0c;专业的知识还得到机构去学习&＃xff0c;培训机构的设立有其存在的必然性&＃xff0c;你钱花对了吗&＃xff1f;
推荐阅读&＃xff1a;
Canvas基础教程1
Canvas基础教程2
结尾动画——线条花环
京公网安备 11010802041100号