`
rayln
  • 浏览: 433996 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Canvas装载文字两种格式

 
阅读更多
context对象可以设置以下 text 属性:
font:文字字体,同 CSSfont-family 属性
textAlign:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
textBaseline:文字竖直对齐方式。可取属性值:top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic

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

下面是一个在 canvas 中绘制”hello world” 文字的例子

context.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);  

阴影
目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为

shadowColor:阴影颜色。其值和 CSS 颜色值一致。
shadowBlur:设置阴影模糊程度。此值越大,阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
shadowOffsetX 和 shadowOffsetY:阴影的 x 和 y 偏移量,单位是像素。


下面是
canvas 阴影的例子:
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); 
分享到:
评论

相关推荐

    微信小程序canvas实现文字缩放

    综上所述,实现微信小程序canvas的文字缩放主要涉及`setFontSize`方法的使用以及事件监听来动态调整字体大小。通过熟练掌握canvas API,开发者可以在微信小程序中构建出各种炫酷的图形和动画效果,提升用户体验。

    canvas 合成 文字 图片

    在前端开发中,Canvas是HTML5提供的一种强大的图形绘制API,可以用来动态生成图像、进行图像处理和合成。本文将详细介绍如何使用Canvas进行文字与图片的合成,通过一个简单的入门Demo来展示具体实现过程。 首先,...

    微信小程序canvas实现文字自由移动

    这里的x和y是文字的坐标,可以通过调整这两个值来改变文字的位置。 4. **动画实现**:为了实现文字的自由移动,我们需要使用微信小程序的动画API。创建一个`wx.createAnimation`对象,设置动画的属性如移动的距离、...

    html5 canvas米字格式手写文字练习代码.zip

    这个“html5 canvas米字格式手写文字练习代码”压缩包提供了一个实例,可以帮助学习者更好地理解和掌握Canvas API的用法,特别是关于文字绘制的部分。 在HTML5中,Canvas是一个二维绘图上下文,通过JavaScript来...

    js实现canvas保存图片为png格式并下载到本地的方法

    JavaScript中实现canvas保存图片为PNG格式并下载到本地的方法涉及到几个关键步骤和函数。首先,canvas元素允许我们进行图形绘制操作,并可以将绘制的内容导出为图像。这个过程可以分为以下几个步骤:在canvas上进行...

    canvas-文字填充

    canvas-文字填充

    canvas使用外部字体

    这篇博客“canvas使用外部字体”探讨了如何在canvas上使用非标准字体,即外部字体,来增强图形的视觉效果。下面将详细阐述这个主题。 首先,canvas本身并不支持直接引用CSS样式,包括字体样式。因此,如果要在...

    Canvas画布图片文字拼接合成,生成图片

    在Web开发中,Canvas是HTML5提供的一种强大的图形绘制接口,允许开发者在网页上动态绘制图像、文字甚至视频。本文将深入探讨如何利用Canvas进行图片和文字的拼接合成,生成自定义的图像,尤其适用于制作邀请函、海报...

    html5 canvas米字格式手写文字练习代码

    在这个“html5 canvas米字格式手写文字练习代码”项目中,用户可以通过鼠标在Canvas上模拟手写汉字,特别是米字格这种结构,有助于初学者规范汉字的笔画和结构。 首先,我们要理解Canvas的基本使用。HTML5中的`...

    HTML5 Canvas弹性文字动画

    之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画,这款文字动画是将文字悬挂在富有弹性的细线上,用鼠标...

    在标题栏上添加按钮 利用canvas回执文字

    这样,我们就实现了一个具有自定义按钮和canvas文字回执效果的标题栏。当然,实际应用中可能需要考虑更多的细节,如响应式布局、动画效果、按钮的功能实现等。对于“0255”这个文件名,它可能是代码示例的一部分,...

    HTML5 canvas 3D文字云动画

    可能包括设置canvas的尺寸、位置,以及可能的文字样式,如颜色、字体等。此外,CSS3的动画和过渡效果可以用来增强用户体验,比如在页面加载时平滑地显示3D文字云。 JavaScript文件(可能命名为"js")中,应该包含了...

    canvas创建文字笔画坐标,绘制和识别

    3.1 写字 点击后会把本地的坐标位置数据以点的形式显示在画布上,在某点按下,拖动到另外一点,会把这两点链上。如果过某一点不松鼠标也会链上。 3.2 检测 会检测你所链接的点的是完全和本地位置数组是否一致。只有...

    Canvas绘制3D文字摇晃特效.zip

    "Canvas绘制3D文字摇晃特效.zip"这个压缩包包含了一种利用Canvas实现的3D文字摇晃动画效果,这在网页设计中可以增加交互性和视觉吸引力。 首先,3D文字效果通常通过CSS3的`transform`属性来实现,但在Canvas中,...

    js+canvas实现图片格式webp/png/jpeg在线转换

    3. **格式转换**:使用Canvas的`toDataURL()`方法,我们可以将Canvas的内容转换回Data URL,但这次可以指定输出的图片格式。`toDataURL()`方法接受两个参数:`type`和`encoderOptions`。`type`用于指定输出的图片...

    第26章 canvas绘制文字

    在Canvas上绘制文字,主要使用`fillText()`和`strokeText()`两个方法。`fillText()`用于填充文本,而`strokeText()`则描边文本。基本用法如下: ```javascript ctx.fillText('Hello, World!', x, y); ctx....

    微信小程序专用的二维码组件支持base64输出和canvas绘制两种方式

    本文将详细介绍微信小程序中一个专用的二维码组件,它支持base64输出和canvas绘制两种方式。 首先,我们要理解二维码的基本原理。二维码(Quick Response Code)是一种二维条码,能存储更多的信息,如网址、文本、...

    根据DOM将html转为canvas图片格式

    Base64是一种用于将任意二进制数据编码为ASCII字符串的方法。在Web中,Base64编码常用于在URL中传递图片数据,或者在CSS、JavaScript等文本格式中嵌入图像。将Canvas转换为base64编码的图片,可以方便地在浏览器中...

    js旋转字体代码 canvas字体旋转

    字体绕中心一圈的写法,欢迎js初学者来下载。

Global site tag (gtag.js) - Google Analytics