Canvas学习Part1 - fillStyle、createLinearGradient() 、createPattern() 、createRadialGradient()

 fillStyle 属性

用法：设置或返回用于填充绘画的颜色、渐变或模式。

createLinearGradient() 

• 创建线性的渐变对象。
• 渐变可用于填充矩形、圆形、线条、文本等等。

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

createPattern() 方法 

• 在指定的方向内重复指定的元素。
• 元素可以是图片、视频，或者其他 <canvas> 元素。
• 被重复的元素可用于绘制/填充矩形、圆形或线条等等。

参数	描述
image	规定要使用的模式的图片、画布或视频元素。
repeat	默认。该模式在水平和垂直方向重复。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

createRadialGradient() 方法

• 创建放射状/圆形渐变对象。
• 渐变可用于填充矩形、圆形、线条、文本等等。

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

addColorStop() 方法

• 规定渐变对象中的颜色和位置。
• addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。

 

基本用法

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#F69";
ctx.fillRect(10,10,200,200);

渐变用法：

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"#654ea3");
my_gradient.addColorStop(1,"#eaafc8");
ctx.fillStyle=my_gradient;
ctx.fillRect(10,10,200,200);

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"#654ea3");
my_gradient.addColorStop(1,"#eaafc8");
ctx.fillStyle=my_gradient;
ctx.fillRect(10,10,200,200);

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"#654ea3");
my_gradient.addColorStop(0.5,"#FF416C");
my_gradient.addColorStop(1,"#eaafc8");
ctx.fillStyle=my_gradient;
ctx.fillRect(10,10,200,200);

圆形渐变

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createRadialGradient(75,50,5,90,60,100);
my_gradient.addColorStop(0,"#654ea3");
my_gradient.addColorStop(1,"#eaafc8");
ctx.fillStyle=my_gradient;
ctx.fillRect(10,10,200,200);
</script>

 

图像填充

<img src="img_lamp.jpg" id="lamp">
<button onclick="draw('repeat')">重复</button> 
<button onclick="draw('repeat-x')">重复-x</button> 
<button onclick="draw('repeat-y')">重复-y</button> 
<button onclick="draw('no-repeat')">不重复</button>     
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
function draw(direction)
{
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.clearRect(0,0,c.width,c.height); 
	var img=document.getElementById("lamp")
	var pat=ctx.createPattern(img,direction);
	ctx.rect(0,0,220,128);
	ctx.fillStyle=pat;
	ctx.fill();
}
</script>