H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变

上一节介绍了H5：画布Canvas基础知识讲解（二）之插入图像、像素级操作，接下来继续讲解H5：画布Canvas基础。

文字

虽然最近的WebKit版本和Firefox 3.1 nightly build才开始支持Text API，为了保证文章完整性我决定仍在这里介绍文字API。
context对象可以设置以下text属性：

font：文字字体，同CSS font-family属性；

textAlign：文字水平对齐方式。可取属性值: start,end,left,right,center。默认值：start；

textBaseline：文字竖直对齐方式。可取属性值：top,hanging,middle,alphabetic,ideographic,bottom。默认值：alphabetic。

有两个方法可以绘制文字：fillText和strokeText。第一个绘制带fillStyle填充的文字，后者绘制只有 strokeStyle边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的(x,y)坐标的相对位置。

 ontext.fillStyle    = '#00f';context.font         = 'italic 30px sans-serif';context.textBaseline = 'top';context.fillText  ('Hello world!', 0, 0);context.font         = 'bold 30px sans-serif';context.strokeText('Hello world!', 0, 50);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

阴影

目前只有Konqueror和Firefox 3.1 nightly build支持Shadows API。API的属性为：shadowColor：阴影颜色。其值和CSS颜色值一致。

shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和Photoshop的高斯模糊滤镜相同。

shadowOffsetX和shadowOffsetY：阴影的x和y偏移量，单位是像素。

 context.shadowOffsetX = 5;context.shadowOffsetY = 5;context.shadowBlur    = 4;context.shadowColor   = 'rgba(255, 0, 0, 0.5)';context.fillStyle     = '#00f';context.fillRect(20, 20, 150, 100);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

颜色渐变

除了CSS颜色， fillStyle和strokeStyle属性可以设置为CanvasGradient对象。——通过CanvasGradient可以为线条和填充使用颜色渐变。

欲创建CanvasGradient对象，可以使用两个方法：createLinearGradient和createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。

创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。

下面的代码演示了颜色渐变使用方法：

 var gradient1 = context.createLinearGradient(sx,sy,dx,dy);gradient1.addColorStop(0,   '#f00');gradient1.addColorStop(0.5, '#ff0');gradient1.addColorStop(1,   '#00f');var gradient2 = context.createRadialGradient(sx,sy,sr,dx,dy, dr);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。

小结

Canvas是HTML5最让人期待的特性之一，目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。2D context API提供大量图形绘制功能——我希望通过本文你了解了Canvas使用，并且你有兴趣了解更多！

H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变相关推荐

新手上路：ADAMS 基础知识讲解（图文并茂）【转载仿真论坛】(三）
引用 Baker 的新手上路:ADAMS 基础知识讲解(图文并茂)[转载仿真论坛](三) 四.常见问题篇 1.ADAMS中的单位的问题开始的时候需要为模型设置单位.在所有的预置单位系统中,时间单位 ...
好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
什么是防火墙？防火墙基础知识讲解
什么是防火墙?防火墙基础知识讲解 - 云+社区 - 腾讯云什么是防火墙防火墙也被称为防护墙,它是一种位于内部网络与外部网络之间的网络安全系统,可以将内部网络和外部网络隔离.通常,防火墙可以保护内 ...
ADAMS 基础知识讲解
转载自blog.sina.com.cn/s/blog_6a4918850100nywk.html 二.书籍篇宗旨:勤看书勤做实例对新手来说,书无非是第一手好资料了,目前关于adams的中文书有如下 ...
相机基础知识讲解：CMOS和CCD
相机基础知识讲解之感光元件:CMOS和CCD 前言一.CMOS 二.CCD 三.CMOS和CCD的区别性能指标差异前言当你在手机或相机上按下拍照键,都发生了些什么? 当你举起手机或相机时,景 ...
PLC控制柜基础知识讲解
PLC控制柜基础知识讲解,一文搞定! PLC控制柜是指成套的控制柜,可实现电机,开关的控制的电气柜. 免费学习PLC编程技术,包吃住还有工资... PLC控制柜有过载.短路.缺相保护等功能.其结构紧凑 ...
新手上路：ADAMS 基础知识讲解（图文并茂）【转载仿真论坛】(五）
引用 Baker 的新手上路:ADAMS 基础知识讲解(图文并茂)[转载仿真论坛](五) 五.常用函数介绍篇 (一).adams函数总体介绍 1.ADAMS/View? 是MDI公司出品的动力学仿真 ...
新手上路：ADAMS 基础知识讲解（图文并茂）【转载仿真论坛】(六）
引用 Baker 的新手上路:ADAMS 基础知识讲解(图文并茂)[转载仿真论坛](六) 六.adams与CAD数据转换篇 (一).proe与adams的联合仿真 1.ADAMS与Pro/E的接口组 ...

H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变

H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变相关推荐

最新文章

热门文章