曲线的绘制
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.arc(100,100,100,0,90*Math.PI/180,false);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(103,103);
ctx.arcTo(183,83,162,182,40);
ctx.stroke();
在画图的过程中，除了三角形这类基本图形外，曲线也是很常用的一种。想画出曲线，只用把握住几个关键地方就行了。像二次贝塞尔曲线，只要先选好起点和一个控制点，就能掌握曲线的形状。相比之下，arcTo方法就麻烦多了，得告诉它你想要多大的圆弧，这样才能在两点之间画出有圆弧和直线的曲线。至于三次贝塞尔曲线，那就更复杂了，需要一個起点加上两个控制点，根据控制点的位置，曲线的样子会有所变化，比如起伏程度，光滑程度啥的。
ctx.moveTo(50,50); ctx.lineTo(70,120); ctx.lineTo(200,80); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50,50); ctx.quadraticCurveTo(70,120,200,80); ctx.stroke();
对于二次贝塞尔曲线来说，起点和控制点就是决定曲线走向的那俩家伙。若是把控制点点得离曲线近些，那么曲线就会变得非常陡峭;如果控制点离曲线远些，那么曲线就会变得平缓得多。这样随心所欲地调整控制点的位置，就能变换出各种各样的曲线！
三次贝塞尔曲线的神奇
ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20); ctx.stroke();
相比二次贝塞尔曲线只能画U型图案，三次贝塞尔曲线牛逼多了，它能画各种复杂的曲线。加一个控制点之后，起始点、中間過程和終點就更豐富多彩了。这自由度大得很，我們可以瞎猜画出各种好玩儿的图樣。
对于初学者来说，可能觉得这些数学概念有点儿晕。没事你只需要记得“曲线离控制点近就越陡峭，离得远就会变平缓”，这就是贝塞尔曲线的奥秘！亲自动手试试，过不了多久，你就会明白控制点对曲线有多大影响了。
ctx.beginPath(); ctx.moveTo(20,150); ctx.bezierCurveTo(20,50,150,50,150,150); ctx.stroke(); ctx.beginPath(); ctx.moveTo(150,150); ctx.bezierCurveTo(150,250,280,250,280,150); ctx.stroke();
渐变色彩在图形中的运用
除了画图那种轨迹线以外，还有一种超级酷炫的技术叫做色彩渐变，能给元素加上各种各样的背景效果！这种渐变主要分成两种：直线型和曲线型。特别是直线型，还能用角度控制从哪儿开始渐变，就像从左下到右上这样的变化。
Canvas做渐变比CSS3麻烦些，但也更精确，可以有更多控制选项。咱们得设定起止位置还有颜色等等信息才能做出想要的渐变更漂亮。而且，canvas还能设定定位点，用什么方式渐变，这样就能做出更美轮美奂的效果！
.box1{
width:500px;
height:50px;
background: -webkit-linear-gradient(left, red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
Canvas与CSS3渐变对比
.box1{
width:500px;
height:50px;
background: -webkit-linear-gradient(45deg , red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
在Canvas画布上搞渐变色的时候有几个小技巧得记住！首先，在绘画之前就得把效果设好，这是Canvas特有的规矩，别忘了哟。其次，Canvas的径向渐变是从圆心开始扩散的，可以自己选颜色和位置。明白了？
讲道理，在CSS3里，咱们说的那个径向渐变其实就是由两个圆圆绕出来的渐进过程。看看二者，好让你更明白这俩小东西的个性特点和用法。
.box2{
width:300px;
height:200px;
background:-webkit-radial-gradient(red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
深入理解Canvas渐变
Canvas不只是能用，还给你个性定制，比如你可以调整色彩过渡的方向，让它看起来是从左往右或者从左上角到右下角之类的。再比如，你改动一下两个圆形区域的位置和大小，就能发现它们的视觉效果大有不同！
.box2{
width:300px;
height:200px;
background:-webkit-radial-gradient(bottom left, ellipse,red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
你得知道，用canvas画图时要特别小心，全局设定会影响到别的路径！所以，你得多加留心，每个步骤都要认真处理，别让代码乱七八糟的，好让人读懂。
透明度与文字效果
.box2{
width:300px;
height:200px;
background:-webkit-radial-gradient(bottom left, circle,red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
除了颜色过渡，透明度也很关键，尤其是处理路径、图形和文字的时候。将globalAlpha设好，你就能随心所欲地调节元素的透明度了。这样一来，设计的多样性就大大提升！
结论，学学怎么画图，懂点儿颜色变化的小窍门，设计就更有搞头！无论是贝塞尔曲线还是径向渐变，用对了地方，都能让人眼前一亮~所以，大家在做设计时别怕试错，大胆创新，才能做出更出色的作品来！
评论0