html5的canvas知识总结（5）

一时失言乱红尘 2022-05-12 04:52 161阅读 0赞

**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][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>

![70][]

**（2）填充视频**

待完善。。。

**（3）填充canvas**

**注意：在画布2里填充canvas1**

![70 1][]

![70 2][]

**2. 填充颜色**

英语：gradient  梯度，渐变

同样结合fillStyle和fillRect方法

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

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

详情：[http://www.w3school.com.cn/tags/canvas\_createlineargradient.asp][http_www.w3school.com.cn_tags_canvas_createlineargradient.asp]

![70 3][]

![70 4][]

注意：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()][addColorStop] 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

详情：[http://www.w3school.com.cn/tags/canvas\_createradialgradient.asp][http_www.w3school.com.cn_tags_canvas_createradialgradient.asp]

![70 5][]

![70 6][]

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

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

[http_www.w3school.com.cn_tags_canvas_createpattern.asp]: http://www.w3school.com.cn/tags/canvas_createpattern.asp
[70]: /images/20220512/dc2f6ed691bf4df8acaf2f23bf49c984.png
[70 1]: /images/20220512/fc64acbd702042c0832a2e903f0b7b8c.png
[70 2]: /images/20220512/a09fd4f82acb483db4dde9606fef18a9.png
[http_www.w3school.com.cn_tags_canvas_createlineargradient.asp]: http://www.w3school.com.cn/tags/canvas_createlineargradient.asp
[70 3]: /images/20220512/4776e283ed9946a0a775ecd987c22be1.png
[70 4]: /images/20220512/149d22c9cca54b4b8ede939110e82abb.png
[strokeStyle]: http://www.w3school.com.cn/tags/canvas_strokestyle.asp
[fillStyle]: http://www.w3school.com.cn/tags/canvas_fillstyle.asp
[addColorStop]: http://www.w3school.com.cn/tags/canvas_addcolorstop.asp
[http_www.w3school.com.cn_tags_canvas_createradialgradient.asp]: http://www.w3school.com.cn/tags/canvas_createradialgradient.asp
[70 5]: /images/20220512/67274a766fdd4a06b583ae7ff36107e8.png
[70 6]: /images/20220512/d8c13a52ea224f088a86ead0f7a94804.png