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的圆;进行颜色径向渐变