Canvas入门（一）

十、绘制曲线：

 

Canvas不仅可以绘制直线和矩形，还提供了一系列绘制曲线的函数。我们来绘制一个最简单的曲线函数——二次曲线，来绘制我们的林荫小路。

//保存之前的状态        context.save();               context.translate(-10,350);        context.beginPath();               //第一条曲线向右上方弯曲        context.moveTo(0,0);        context.quadraticCurveTo(170,-50,260,-190);               //第二天曲线向右下方弯曲        context.quadraticCurveTo(310,-250,410,-250);               //用棕色的粗线条来绘制路径        context.strokeStyle = '#663300';        context.lineWidth = 20 ;        context.stroke();               //恢复之前的canvas状态        context.restore();

和之前一样，第一步要先保存当前canvas的context状态，因为我们即将变换坐标系并修改轮廓设置。要花林荫小路，首先要把坐标护肤到修正层的原点，向右上角画一条曲线。

quadraticCurveTo函数绘制曲线的起点是当前坐标，带有两组(x,y)参数。第二组是指曲线的终点。第一组代表控制点，其作用相当于对曲线产生了一个拉力。通过调整控制点的位置，就可以改变曲线的曲率。

Canvas的其他曲线功能还涉及bezierCurveTo，arcTo和arc函数。这些函数通过多中控制点（如半径，角度等）让曲线更有可塑性。

十一、插入图片：

在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸或者修改图片等，并且图片通常称为canvas上的焦点。用canvas内置的几个命令可以轻松的为canvas添加图片内容。

下边我们尝试将松树的树干替换为一个树皮文理的图片。

//加载图像     var bark = new Image();     bark.src = "1.jpg";

从上面的代码中可以看到，我们为1.jpg图片添加了onload处理函数，以保证在图像加载完成时才调用猪drawTrails函数。这样做可以保证后续的调用能够把图片正常显示出来。

//填充用于做树干的矩形区域 //context.fillRect(-5,-50,10,50); context.drawImage(bark,-5,-50,10,50);

在这段代码里，我们用纹理贴图替换了之前调用的fillRect函数的填充来作为新的树干。注意，在drawImage函数中，除了图片本身外，还指定了x，y，width和height参数。

十二、渐变：

 

在canvas中还为我们提供了一种更加漂亮的效果渐变。渐变是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。使用渐变需要三个步骤：

1. 创建渐变对象
2. 为渐变对象设置颜色，指明过渡方式
3. 在context上为填充样式或者描边样式设置渐变

可以将渐变看做是颜色沿着一条线进行缓慢的变化。例如，如果为渐变对象提供了A、B两个点，不论是绘制还是填充，只要从A移动到B，都会带来颜色的变化。

要设置显示那种颜色，在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数：颜色和偏移量。颜色参数是值开发人员希望在偏移位置描边或填充是所使用的颜色。偏移量是一个0.0到1.0之间的数值，代表沿着渐变先变的距离有多远。

假如要建立一个从点(0,0)到点(0,100)的渐变，并指定在0.0偏移位置使用白色，在1.0偏移位置使用黑色。当使用绘制或者填充动作从(0,0)画到(0,100)后，就可以看到颜色从白色渐渐变为黑色。

除了可以变换成其他颜色外，还可以为颜色设置alpha值，并且alpha值也是可以变化的。为了达到这样的效果，需要使用颜色值的另一种表示法，例如内置alpha组件的CSSreba函数。

下边是代码示例：

//创建用作树干纹理的三阶水平渐变 var trunkGradient = context.createLinearGradient(-5,-50,5,-50); //树干的左侧边缘是一般程度的棕色 trunkGradient.addColorStop(0,'#663300'); //树干中间偏左的位置颜色要淡一些 trunkGradient.addColorStop(0.4,"#996600"); //树干右侧边缘的颜色要深一些 trunkGradient.addColorStop(1,'#552200'); //使用渐变填充树干 context.fillStyle = trunkGradient; context.fillRect(-5,-50,10,50); //创建垂直渐变，一用作树冠在树干上投影 var canopyShadow = context.createLinearGradient(0,-50,0,0); //投影渐变的起点是透明度设为50%的黑色 canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); //方向向下垂直，渐变色在很短的距离内迅速渐变值完全透明，这段 //长度职位的树干上没有投影 canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)'); //在树干上填充投影渐变 context.fillStyle = canopyShadow; context.fillRect(-5,-50,10,50);

加入两个渐变效果后，图变成了如下的样子，这个松树具有了平滑的光照效果。现在，树干看起来更平滑，同时树干上也有了轻微的阴影效果

除了刚才用到的线性渐变以外，canvas还支持放射性渐变，所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是不一样的，不过参数如下：

createRadialGradient(x0,y0,r0,x1,y1,r1);

代码中，前三个参数代表以(x0,y0)为圆心，r0为半径的圆，后三个代表以(x1,y1)为圆心，r1为半径的另一个圆。渐变会在两个圆中间的区域出现。

 

 

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。