HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

CSS3中的很多都可以类比与我们canvas的一些属性 
canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性 
我们不仅仅可以绘制图形，还可以向画布中添加文字

文字填充

同样先获取元素对象与环境对象

<canvas id="myCanvas" width=500 height=500></canvas>
 
 
1
 
 
1

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');
 
 
1
2
 
 
1
2

font用于设置字体属性 
fillText设置实体文字与位置 
strokeText设置空心文字与位置

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);
 
 
1
2
3
 
 
1
2
3

font可以参考css的font属性 
默认值’10px sans-serif’

---

还有一个测量文字宽度的方法了解即可 
measureText()

console.log(ctx.measureText('hello world!').width);
 
 
1
 
 
1

线段属性

线段覆盖

lineCap()用于设置线段覆盖属性 
有三个值，butt/square/round

ctx.lineCap = 'butt'; //默认
ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'square';
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

图片中的灰色线条是我添加的 
这样就能够看出三个值得区别

线段接合

lineJoin()定义了线段接合的行为 
同样有三个值，miter/round/bevel

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默认
ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

---

ctx.lineWidth = 40;
ctx.lineJoin = 'round'; //改
ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

---

ctx.lineWidth = 40;
ctx.lineJoin = 'bevel'; //改
ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

---

当我们使用默认的miter时 
当两条线段角度很小的时候 
“尖”会越来越大 

当它“尖”到一定程度时，默认值就会变成bever 

我们可以设置突破这个限制，使用miterLimit 
这样改变默认值的长度就会被我们设置为limit*lineWidth/2 
了解就好

ctx.miterLimit = 30;
 
 
1
 
 
1

裁剪

clip属性表示当前路径外的区域不再绘制 
就相当于把当前这块区域从画布上裁剪下来

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);
ctx.clip();
ctx.fillRect(0, 0, 500, 500);
 
 
1
2
3
 
 
1
2
3

这里我把画布截成了一个圆 
这样填充矩形时就只能填充到这个“圆形画布”里了 

透明度

使用globalAlpha可以设置全局透明度 
这个非常简单就不多解释了

ctx.globalAlpha = 0.4;
ctx.fillRect(100, 100, 300, 300);
 
 
1
2
 
 
1
2

像素合并

globalCompositeOperation用于设置 
新图形像素与旧图形像素的合并方式 
它有11个值（不同浏览器实现程度或方式不同） 
常见的有3个，source-over(默认)/destination-over/copy 
souce-over是后绘制图形覆盖到先绘制图形的上面 
destination-over是先绘制图形在后绘制图形的上面 
copy是只显示后绘制图形（先绘制图形消失） 
理论上是这样的 

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = 'red';
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

下面我给出我在最新版chrome测试的值供大家参考

source-over： 

destination-over： 

copy： 

lighter： 

xor： 

source-out： 

剩下的5中chrome可能是觉得没什么用移除了 
（source-in、source-atop、destination-in、destination-atop、destination-out）

==主页传送门==