canvas学习之将图片设置为画笔原料

复习

上一节中我们学习了如何给绘制的内容设置渐变。要想设置线性渐变，需要用creatLinearGradient(x1,y1,x2,y2)创建径向渐变对象，然后在此基础上，通过addColorstop(position, color)来添加渐变颜色。想要设置径向渐变，我们需要使用createRadialGradient(x1,y1,r1,x2,y2,r2)来创造径向渐变对象，然后使用addColorstop(position, color)来添加颜色。最后将这两个对象添加到fillStyle或者strokeStyle属性上，就可以绘制出渐变的图形来。

学习：将图片设置到样式中来

这一节课，我们学习如何将一个图片或者canvas对象作为颜料去绘制。在渐变的学习中，我们知道，要想设置渐变为颜料，是需要先创建渐变对象的。和渐变一样，要想将图片设置为颜料，也是需要先创建相应的对象的。创建对象时用到的接口是createPattern(Image, type)。image是指Image新建的image对象，或者是获取到的canvas对象，type是指图片是否要重复，一共有四个值，分别是repeat，重复；no-repeat，不重复。repeat-x，在x轴上重复，repeat-y在y轴上重复。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<canvas width="500" height="500" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
if (canvas.getContext) {
  const ctx = canvas.getContext('2d')
  let img = new Image()
  img.src = "http://image.iget100.com/%E5%85%A8%E5%9B%BD%E7%BE%8E%E6%9C%AF%E5%87%BA%E7%89%88%E8%81%94%E5%90%88%E4%B9%A6%E5%8D%95%20%EF%BD%9C2020%E5%B9%B42%E6%9C%88%C2%B7%E6%80%BB%E7%AC%AC45%E6%9C%9F2"
    img.onload = function () {
    var pattern = ctx.createPattern(img, 'repeat')
    ctx.fillStyle = pattern
     ctx.fill(0,0, 500,500)
  }
}
</script>

这样，我们就把图片作为颜料放入到canvas中去了。需要注意的是，一定等到图片加载完后在进行绘制和田间，否则图片是出不来的。

接下来，我们对用另一个canvas作为颜料绘画来进行举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<canvas width="500" height="500" id="mycanvas1"></canvas>
<canvas width="500" height="500" id="mycanvas2"></canvas>
<style>
canvas{
  border:solid blue 1px;
  margin: 10px;
}
</style>
<script>
    const canvas1 = document.getElementById('mycanvas1')
    if (canvas1.getContext('2d')) {
      const ctx1 = canvas1.getContext('2d')
      ctx1.fillStyle = "#e74478"
      ctx1.fillRect(0,0,500,500)
    }
    const canvas2 = document.getElementById('mycanvas2')
    if (canvas2.getContext) {
      const ctx2 = canvas2.getContext('2d')
      let useCanvas = document.getElementById('mycanvas1')
      let pattern = ctx2.createPattern(useCanvas, 'repeat')
      ctx2.fillStyle = pattern
      ctx2.fillRect(0,0, 500,500)
    }
</script>

在上面的例子中，我们看到，第一个canvas我们设定了颜色，绘制出来一个粉红色背景，第二个中我们并没有设置颜色，而是直接获取了第一个canvas对象并且设置在了fillStyle中。

至此，关于canvas上色的全部知识我们就都学完了，下面我们整体回顾一下。

回顾

在canvas上色中，一共有两个属性，一个叫fillStyle，用来给填充图形上色，另一个是strokeStyle，用来给线条上色。

对这两个属性进行赋值，接下来进行绘画时，对应的方法就会将该值对应的参数绘制出来。

1.可以为这两个属性赋值各种形式的颜色值，包括英文字母颜色，rgb，rgba，hsl，hsla，16进制颜色等等。

2.可以通过rgba的方法进行透明赋值，如果希望全局透明，还可以使用globaAlpha。

3.使用createlinearGradient和createRadialGradient创建渐变对象，然后通过addColorStop方法添加渐变颜色，来实现渐变。

4.使用createPattern方法创建图片或者canvas引用对象，实现将图片或者canvas作为颜料的目的。