整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Canvas学习笔记 - 文本操作

头条创作挑战赛#

简介

在Canvas中，文本操作的常用方法有：

方法

说明

fillText()

绘制实心文本

strokeText()

绘制空心文本

measureText()

获取文本长度

在Canvas中，文本操作的常用属性有：

方法

说明

font

定义文本字体样式

textAlign

定义文本水平对齐方式

textBaseline

定义文本垂直对齐方式

fillStyle

定义实心文本颜色

stokeStyle

定义空心文本颜色

strokeText()方法

在Canvas中，我们使用strokeText()绘制空心文本。

语法：

ctx.strokeText(text, x, y, maxWidth);

说明：

参数说明：

  • 参数text表示想要绘制的文本字符串；
  • 参数x表示文本的横坐标；
  • 参数y表示文本的纵坐标，是文本最下边的坐标；
  • 参数maxWidth为可选参数，表示文本的最大宽度（单位为像素）。如果文本长度超出maxWidth的值，会将文本压缩至maxWidth。

示例：strokeText()方法示例

示例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>strokeText()方法示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
    
        var text = "嗨皮汪小成";
        ctx.font = "bold 30px 微软雅黑";
        ctx.strokeStyle = "red";
        ctx.strokeText(text, 50, 50);
      };
    </script>
  </body>
</html>

效果图：

SS属性值 字体与文本

网页设计中有很多的文字要去处理，标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本

字体

首先要有一个认识字体和文本不是一个东西哦。字体是不同的文本体式或者可以说是字的形体结构。对于英文来说有很多种不同的样式包括字母、数字和符号组成的。

文本指的是通过文本属性描述对文本的处理方式。行高，字符间距，缩进等。

那么网页中的字体是哪里来的呢？其中有哪些属性？文本属性中有哪些小秘密呐？

来源

  • 用户机器中安装的字体

  • 保存在第三方网站上的字体（link）

  • 保存在服务器上的字体。这些字体可以使用@font-face规则随网页一起发给浏览器（一般字体图片都会放到一个单独的服务器上，更加的优化）

字体属性

font-family

字体族

font-family用于设定元素中的文本使用什么字体。通常给一个文档页面设置一个主字体（因为font-family是可以继承的），然后针对那些需要使用不用样式的字体在单独应用font-family。

因为字体来源我们已经知道了，两条路径要么是用户机器，要么是网上，那么就存在某种字体不能再某个网页中使用的可能。所以需要给出一组字体，这组字体叫做字体栈 。

简单的来说就是就是预备队，如果用户机器上没有某种字体，预备的字体就用作用了，用户还可以使用另一种字体阅读。

/*
	font-family的值不区分大小写 但是如果引入的是在线字体库请不要随意修改
	有可能导致无法使用提供的定制字体
*/
body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif；}

font-size

字体大小

浏览器样式表默认为每个HTML元素都设定了font-size，言外之意是我们在设置font-size的时候其实是在修改默认值。字体大小的单位px、%、em。但是有一个很重要的点是字体的大小也是可以去继承的这个地方可能会出现一些未知的错误。

px是一个很常见的单位，em也是一个单位有什么区别呢？

px是绝对单位，em是一种相对单位与百分比是一样的，浏览器默认样式表在设定所有元素的字体大小时使用的都是相对单位em，h1被设定为2em，h2是1.5em，p是1em。默认情况下1em = 16px。这也是font-size的基准大小。

example 1

1
2
3
4
5
6
7
8
9
10
11
<style>
 /* h1此时2em */
 body{font-size: 200%;}
 /* h1此时应该是多少呢？ */
 body{font-size: 20px;}
 p{font-size: 16px;}
</style>
<body>
 <h1>我是谁</h1>
 <p>font-size</p>
</body>


tip：其它的以绝对单位设定的会重新设定字体的大小，不会产生继承。同时我们在设定的时候可以选择关键字值，比如x-small，medium，x-large等等 ，当然用的很少，你会在浏览器看到medium感兴趣的可以去观察一下吧。

example 2

1
2
3
4
5
6
7
<style>
 /* span的字体大小是多少呢? */
 p{font-size： 80%;}
</style>
<body>
 <p>我是<span>小贵</span></p>
</body>

example 3

1
2
3
4
5
6
7
8
9
10
<style>
 /* h1的字体大小是多少呢？ */
 /* span的字体大小是多少呢? */
 body{font-size: 150%;}
 p{font-size： 80%;}
</style>
<body>
 <h1>我是小小</h1>
 <p>我是<span>小小</span></p>
</body>

tip：使用绝对单位的好处是，在祖先元素的字体大小变化时，不会出现意外的连锁反应。

font-style

字体样式

值描述
normal默认值。浏览器显示一个标准的字体样式。
italic浏览器会显示一个斜体的字体样式。（斜体代表强调含义所以还是用em）
oblique浏览器会显示一个倾斜的字体样式。
inherit规定应该从父元素继承字体样式。

font-weight

字体粗细

这个貌似没什么好说的，还是过了吧。主要一点最好使用bold，normal当然strong标签是加粗的状态，你们应该懂我的意思。

font-variant

字体变化

值描述
normal默认值。浏览器会显示一个标准的字体。
small-caps浏览器会显示小型大写字母的字体。
inherit规定应该从父元素继承 font-variant 属性的值。

font

简写，复合写法

强调两个规则

rule

  • 必须声明size与family。

  • 顺序 font-weight、font-style、font-variant随意调换，其次font-size，font-family。

  • 同时还可以设置行高 font:bold italic small-caps 16px/1.5 ‘Microsoft yahei’ 16px/1.5的这个1.5代表的是倍数。

今天就分享到这，明天在分享！

如果你们想要了解或者想要深入学习java和web可以进我的群里进行交流学习,群号：web330336289，java644038439。欢迎我们进去交流学习，我们一同学习一同行进，我觉得程序员不应该中止脚步，而是一向在学习的道路上一向行进。

编码：天弘

效的CSS写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。

色彩缩写

色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：

color：#113366

可以简写为

color：#136

所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。

盒子大小

这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：

margin-top:1px;  
margin-right:1px;  
margin-botton:1px;  
margin-left:1px;

这四个值可以缩写到一起：

margin:1px 1px 1px 1px;


缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：

margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px;  
margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px  
margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px;  
margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。

边框(border)

border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。

border-width:数字+单位;

border-style:none||hidden||dashed||dotted||double||groove||inset||outset||ridge||solid;

border-color: 颜色 ;

它可以按照width、style和color的顺序简写：

border:5px solid #369;

有的时候，border可以写的更简单些，有些值可以省掉，但是请注意哪些是必须的，你也可以测试一下：

border:groove red; //大家猜猜这个边框的宽度是多少？  
border:solid; //这会是什么样子？  
border:5px; //这样可以吗？  
border:5px red; //这样可以吗？？  
border:red; //这样可以吗？？？

通过上面的代码可以了解到，border默认的宽度是3px，默认的色彩是black——黑色。默认的颜色是该规则中的color属性的值，而color默认是黑色的(多谢 @birdstudio的提醒 )。border的缩写中border-style是必须的。

同时，还可以对每条边采用缩写：

border-top:4px solid #333;  
border-right:3px solid #666;  
border-bottom:3px solid #666;  
border-left:4px solid #333;

还可以对每个属性采用缩写：

border-width：1px 2px 3px; //最多可用四个值，缩写规则类似盒子大小的缩写，下同  
border-style：solid dashed dotted groove;  
border-color:red blue white black;

outline

outline类似border，不同的是border会影响盒模型，而outline不会。

outline-width:数字+单位;

outline-style:none||dashed||dotted||double||groove||inset||outset||ridge||solid;

outline-color: 颜色 ;

可以缩写为：

outline:1px solid red;

同样，outline的简写中，outline-style也是必须的，另外两个值则可选，默认值和border相同。

背景(background)

background是最常用的简写之一，它包含以下属性：

background-color:color||#hex||RGB(%||0-255)||RGBa;

background-image:url();background-repeat:repeat||repeat-x||repeat-y||no-repeat;

background-position:X Y|| (top||bottom||center) (left||right||center);

background-attachment:scroll||fixed;

background的简写可以大大的提高css的效率：

background:#fff url(img.png) no-repeat 0 0;

background的简写也有些默认值：

background:transparent none repeat scroll top left ;

background属性的值不会继承，你可以只声明其中的一个，其它的值会被应用默认的。

font

font简写也是使用最多的一个，它也是书写高效的CSS的方法之一。

font包含以下属性：

font-style:normal||italic||oblique;

font-variant:normal||small-caps;

font-weight:normal||bold||bolder|| ||lighter|| (100-900);

font-size: (number+unit) || (xx-small-xx-large);

line-height:normal|| (number+unit);

font-family:name,"more names";

font的各个属性也都有默认值，记住这些默认值相对来说比较重要：

font-style: normal;  
font-variant:normal;  
font-weight: normal;  
font-size: inherit;  
line-height: normal;  
font-family:inherit;

事实上，font的简写是这些简写中最需要小心的一个，稍有疏忽就会造成一些意想不到的后果，所以，很多人并不赞成使用font缩写。

不过这里正好有个小手册，相信会让你更好的理解font的简写：

列表样式

可能大家用的最多的一条关于列表的属性就是：

list-style:none

它会清除所有默认的列表样式，比如数字或者圆点。

list-style也有三个属性：

list-style-type:none||disc||circle||square||decimal||lower-alpha||upper-alpha||lower-roman||upper-roman

list-style-position:inside||outside||inherit

list-style-image: (url) ||none||inherit

list-style的默认属性如下：

list-style:disc outside none

需要注意的是，如果list-tyle中定义了图片，那么图片的优先级要比list-style-type高，比如：

list-style:circle inside url(../img.gif)

这个例子中，如果img.gif存在，则不会显示前面设置的circle符号。

PS:其实list-style-type有很多种很有用的样式，感兴趣的同学可以参考一下：https://developer.mozilla.org/en/CSS/list-style-type

border-radius(圆角半径)

border-radius是css3中新加入的属性，用来实现圆角边框。这个属性目前不好的一点儿是，各个浏览器对它的支持不同，IE尚不支持，Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是，如果单个角的border-radius属性的写法在这两个浏览器的差异更大，你要书写大量的私有属性：

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;  
border-top-left-radius:6px;  
border-top-right-radius:6px;

这个例子中，如果img.gif存在，则不会显示前面设置的circle符号。

PS:其实list-style-type有很多种很有用的样式，感兴趣的同学可以参考一下：https://developer.mozilla.org/en/CSS/list-style-type

border-radius(圆角半径)

border-radius是css3中新加入的属性，用来实现圆角边框。这个属性目前不好的一点儿是，各个浏览器对它的支持不同，IE尚不支持，Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是，如果单个角的border-radius属性的写法在这两个浏览器的差异更大，你要书写大量的私有属性：

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;  
border-top-left-radius:6px;  
border-top-right-radius:6px;

呃，是不是你已经看的眼花了？这只是要实现左上角不是圆角，其它三个角都是圆角的情况。所以对于border-radius，强烈建议使用缩写：

-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px; 
border-radius:0 6px 6px;

这样就简单了很多。PS:不幸的是，最新的Safari(4.0.5)还不支持这种缩写… (thanks @fireyy)

就总结这么多，还有其它的可以缩写的属性吗？欢迎大家提出一起讨论。

参考资源

常用CSS缩写语法总结：

www.w3cn.org/article/tips/2005/103.html

CSS Shorthand Guide

Efficient CSS with shorthand properties

Mozilla Developer Center:CSS Reference

CSS Font Shorthand Property Cheat Sheet


在线咨询
上一篇：html5 工业web组态-开发自定义的组件 （炫酷按钮）
下一篇：HTML 编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 岳阳 盐城 老边区 广安 龙山区 华阴市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服