html5的canvas知识总结（5）

1. 填充图案

英语：pattern 图案

createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。

（1）图片

createPatter（image, "repeat | repeat-x | repeat-y | no-repeat") 该方法要结合：fillStyle()和fillRect()方法一起使用

只能从图片左上角开始获取图片，不能对图片大小和位置进行调整。调整的是：图片在canvas中的位置。

详情：http://www.w3school.com.cn/tags/canvas_createpattern.asp

   <canvas width="200" height="200" id="canvas1"></canvas>
    <script>
        var oCanvas = document.getElementById('canvas1'); //获取canvas
        var ctx = oCanvas.getContext('2d'); //获取canvas的上下文
        var oImg = new Image();
        oImg.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3266320382,1596044228&fm=200&gp=0.jpg';
        oImg.onload = function(){
            ctx.fillStyle = ctx.createPattern(oImg, 'no-repeat');          
            ctx.fillRect(10,10, 200, 200);
        }
    </script>

（2）填充视频

待完善。。。

（3）填充canvas

注意：在画布2里填充canvas1

2. 填充颜色

英语：gradient  梯度，渐变

同样结合fillStyle和fillRect方法

（1）线性渐变色：createLinearGradient(x0,y0,x1,y1); 两个点确定颜色渐变的方向。

重点还是把下面这个例子看懂，就基本上理解了createLinearGradient(x0,y0,x1,y1)方法的使用。

详情：http://www.w3school.com.cn/tags/canvas_createlineargradient.asp

注意：createLinearGradient(x0,y0,x1,y1); 两个点确定颜色渐变的方向。以及渐变的区域

ctx.fillStyle = bg：填充的样式是bg

ctx.fillRect(0,0, 200,  200)：填充的区域是点（0,0）开始宽为200，高为200的区域

bg是createLinearGradient(x0,y0,x1,y1)创建的对象，该对象有自己的方法：addColorStop（0-1，颜色）

（2）径向渐变色：context.createRadialGradient(x0,y0,r0,x1,y1,r1);起始圆及半径；终止圆及半径；

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

详情：http://www.w3school.com.cn/tags/canvas_createradialgradient.asp

注意：ctx.createRadialGradient(100,100, 50,100,100,100);

圆心（100,100）半径50的圆——>圆心（100,100）半径100的圆；进行颜色径向渐变