CSS3中的很多都可以类比与我们canvas的一些属性

canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性

我们不仅仅可以绘制图形,还可以向画布中添加文字

文字填充

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

<canvas id="myCanvas" width=500 height=500></canvas> var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d');

font用于设置字体属性

fillText设置实体文字与位置

strokeText设置空心文字与位置

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

font可以参考css的font属性

默认值’10px sans-serif’


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

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

measureText()

console.log(ctx.measureText('hello world!').width); 线段属性 线段覆盖

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();

图片中的灰色线条是我添加的

这样就能够看出三个值得区别


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

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();
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
ctx.lineWidth = 40; ctx.lineJoin = 'round'; //改 ctx.moveTo(100, 100); ctx.lineTo(400, 400); ctx.lineTo(100, 400); ctx.closePath(); ctx.stroke();
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
ctx.lineWidth = 40; ctx.lineJoin = 'bevel'; //改 ctx.moveTo(100, 100); ctx.lineTo(400, 400); ctx.lineTo(100, 400); ctx.closePath(); ctx.stroke();
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

当我们使用默认的miter时

当两条线段角度很小的时候

“尖”会越来越大


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

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


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

我们可以设置突破这个限制,使用miterLimit

这样改变默认值的长度就会被我们设置为limit*lineWidth/2

了解就好

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

clip属性表示当前路径外的区域不再绘制

就相当于把当前这块区域从画布上裁剪下来

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

这里我把画布截成了一个圆

这样填充矩形时就只能填充到这个“圆形画布”里了


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

使用globalAlpha可以设置全局透明度

这个非常简单就不多解释了

ctx.globalAlpha = 0.4; ctx.fillRect(100, 100, 300, 300);
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
像素合并

globalCompositeOperation用于设置

新图形像素与旧图形像素的合并方式

它有11个值(不同浏览器实现程度或方式不同)

常见的有3个,source-over(默认)/destination-over/copy

souce-over是后绘制图形覆盖到先绘制图形的上面

destination-over是先绘制图形在后绘制图形的上面

copy是只显示后绘制图形(先绘制图形消失)

理论上是这样的


HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
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();
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

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

source-over:


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

destination-over:


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

copy:


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

lighter:


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

xor:


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

source-out:


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

剩下的5中chrome可能是觉得没什么用移除了

(source-in、source-atop、destination-in、destination-atop、destination-out)

==主页传送门==

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLHTML5CSS3CSS浏览器矩形
分页:12
转载请注明
本文标题:HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
本站链接:http://www.codesec.net/view/521482.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(25)