2020-03-04

canvas学习之透明度和渐变

复习

在上一节中，学习了如何让绘制的图形拥有丰富多样的色彩。这里用到了两个属性。一个是fillStyle = color，对应填充类型的绘制，另一个是strokeStyle=color，对应非填充类型的绘制。这里的color形式多样，只要符合w3c制定的颜色规则就可以。

学习

这一节中，我们要学习两个内容，一个是透明，另外一个是渐变。

透明

在上一节中，我们学过设置color时符合w3c规则中的任意一种都可以，这里就包括rgba的色值形式。相信我们很多人都知道rgba中的每一个值所代表的意思，在这里我们再次复习一下这个知识点。

rgba是指三原色加上一个透明度。rgb是指三原色的值，a就是指透明度，a的范围是0到1。0是完全透明，1是不透明。在css世界中，直接使用rgba就可以实现透明的效果。

同样，在canvas中，rgba也能实现相应的功能。

下面我们做一个透明度从0到1的示例：

<canvas width="500" height="500" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
if (canvas.getContext) {
  const ctx = canvas.getContext('2d')
  for (let i = 0 ; i <= 10; i++) {
    ctx.beginPath()
    ctx.fillStyle = 'rgba(231,68,120,' + i / 10 + ')'
    ctx.fillRect(30, 50 * i + 5,100,45)
    ctx.fill()
  }
}
</script>

这样，我们对绘制的填充图形的透明度进行绘制就完成了。线条绘制利用rgba设置透明度的方法，和填充时的方法是一样的。大家可以自己去试一下。

利用rgba，我们基本上就实现了透明度设置的需求，但是有一个问题就是，每换一个颜色，我们都需要设置透明度，如果有一个全局的属性，就好了。其实，我这么说了，它肯定就是有的了。这个属性就是globalAlpha属性，它的范围也是0到1。有了它，只需设置一遍,全篇通用。

使用示例

<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
if (canvas.getContext('2d')) {
  const ctx = canvas.getContext('2d')
  ctx.globalAlpha = '0.5'
  ctx.fillStyle = '#e74478'
  ctx.fillRect(100, 100, 100, 50)
  ctx.fill()
}
</script>

这样，我们关于canvas透明度的相关方法，就学习完了，下面开始学习渐变。

渐变

渐变有两种情况，一种是径向的渐变，是一个点为中心向四周扩散，另一种是线性渐变，是按照一条线的方向进行变化。

1.线性渐变

线性渐变需要用createLinerHGradient(x1,y1,x2,y2)建一个对象，其中x1，y1是渐变的渐变的起点，x2，y2是是渐变的终点。

创建完对象后，我们需要给已经创建的对象添加渐变色，这个时候就需要用到已经创建对象的addColorStop（position, color）。其中position是渐变色开始的位置，范围是0到1。color是进行渐变的颜色。

下面我们一步步来实现一个线性渐变。

（1）创建绘画上下文

<canvas width="500" height="500" id="mycanvas"></canvas>
<script>
const canvas =document.getElementById('mycanvas')
if (canvas.getContext) {
   const ctx = canvas.getContext('2d')
   const linearGradient = createLinearGradient(0,0, 500,500)
   linearGradient.addStopColor(0, '#e74478')
   linearGradient.addStopColor(1, '#76eec6')
   ctx.fillRect(0,0,500,500)
   ctx.fill()
}
</script>

这样，一个从左上到右下的线性渐变背景就被我们绘出来了。在css中，我们是可以直接控制渐变的方向的，在canvas中能否做到呢？

既然已经这么问了，当然是能做到的，不然就灰溜溜的藏起来了嘛。

我们只需要在创建对象时，设置好起点和终点，就能达到设置方向的目的。下面就拿刚才的例子来举例：

方向从左到右：x1和x2变化，y1和y2保持不变。从右到左，把x1和x2替换一下。

1	let linerGradient = ctx.createLinearGradient(0,0, 500,0)

从上到下，x1和x2保持不变。y1和y2变化。从下到上，把y2和y1替换一下。

1	let linerGradient = ctx.createLinearGradient(0,0, 0,500)

到这里，我们应该发现了，其实渐变就是沿着x1，y1到x2，y2变化的。需要什么角度，直接去调试就可以了。

2.接下来我们学习径向渐变。

径向渐变需要首先需要使用createRadialGradient(x1,y1,r1,x2,y2,r2)来创建径向渐变对象，形式如下：

1	let radialGradient = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)

其中x1,y1,r1表示以点(x1,y1)为圆心，r1为半径的圆，(x2,y2)，r2表示以(x2,y2)为圆心，r2为半径的圆。

由于两个圆心和半径距离的不同，我们可以得到各种不同的效果，接下来我们们着手开始实现不同情况下的效果。

1.两个圆心重合

<canvas width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('mycanvas')
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    let radialGradient = ctx.createRadialGradient(250,250,0, 250,250,250)
    radialGradient.addColorStop(0, '#e74478')
    radialGradient.addColorStop(1, '#00FFFF')
    ctx.fillStyle = radialGradient
    ctx.arc(250,250, 250, 0 , 2 * Math.PI * 2, false)
    ctx.fill()
  }
</script>

2.圆心不相同

更多的情况，可以参考一下这篇博客，写的比较详细()[HTML5 canvas createRadialGradient()放射状/圆形渐变]

这样，透明和渐变我们就学习完了，接下来建议有空尝试一下radialGradient的各种形状。

下一节我们学习如何把一张图片发到canvas里面去

小春的作业本

跟着老师走，每天都得写作业

canvas学习之透明度和渐变

复习

学习