Canvas學習筆記 - 文本操作

頭條創(chuàng)作挑戰(zhàn)賽#

簡介

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

方法	說明
fillText()	繪制實心文本
strokeText()	繪制空心文本
measureText()	獲取文本長度

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

方法	說明
font	定義文本字體樣式
textAlign	定義文本水平對齊方式
textBaseline	定義文本垂直對齊方式
fillStyle	定義實心文本顏色
stokeStyle	定義空心文本顏色

strokeText()方法

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

語法：

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

說明：

參數(shù)說明：

參數(shù)text表示想要繪制的文本字符串；
參數(shù)x表示文本的橫坐標；
參數(shù)y表示文本的縱坐標，是文本最下邊的坐標；
參數(shù)maxWidth為可選參數(shù)，表示文本的最大寬度（單位為像素）。如果文本長度超出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、獲取上下文環(huán)境對象
        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中的字體與文本

字體

首先要有一個認識字體和文本不是一個東西哦。字體是不同的文本體式或者可以說是字的形體結構。對于英文來說有很多種不同的樣式包括字母、數(shù)字和符號組成的。
文本指的是通過文本屬性描述對文本的處理方式。行高，字符間距，縮進等。
那么網頁中的字體是哪里來的呢？其中有哪些屬性？文本屬性中有哪些小秘密吶？

來源

用戶機器中安裝的字體
保存在第三方網站上的字體（link）
保存在服務器上的字體。這些字體可以使用@font-face規(guī)則隨網頁一起發(fā)給瀏覽器（一般字體圖片都會放到一個單獨的服務器上，更加的優(yōu)化）

字體屬性

font-family

字體族

font-family用于設定元素中的文本使用什么字體。通常給一個文檔頁面設置一個主字體（因為font-family是可以繼承的），然后針對那些需要使用不用樣式的字體在單獨應用font-family。

因為字體來源我們已經知道了，兩條路徑要么是用戶機器，要么是網上，那么就存在某種字體不能再某個網頁中使用的可能。所以需要給出一組字體，這組字體叫做字體棧 。

簡單的來說就是就是預備隊，如果用戶機器上沒有某種字體，預備的字體就用作用了，用戶還可以使用另一種字體閱讀。

/*
	font-family的值不區(qū)分大小寫 但是如果引入的是在線字體庫請不要隨意修改
	有可能導致無法使用提供的定制字體
*/
body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif；}

font-size

字體大小

瀏覽器樣式表默認為每個HTML元素都設定了font-size，言外之意是我們在設置font-size的時候其實是在修改默認值。字體大小的單位px、%、em。但是有一個很重要的點是字體的大小也是可以去繼承的這個地方可能會出現(xiàn)一些未知的錯誤。

px是一個很常見的單位，em也是一個單位有什么區(qū)別呢？

px是絕對單位，em是一種相對單位與百分比是一樣的，瀏覽器默認樣式表在設定所有元素的字體大小時使用的都是相對單位em，h1被設定為2em，h2是1.5em，p是1em。默認情況下1em = 16px。這也是font-size的基準大小。

example 1

<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

<style>
 /* span的字體大小是多少呢? */
 p{font-size： 80%;}
</style>
<body>
 <p>我是<span>小貴</span></p>
</body>

example 3

<style>
 /* h1的字體大小是多少呢？ */
 /* span的字體大小是多少呢? */
 body{font-size: 150%;}
 p{font-size： 80%;}
</style>
<body>
 <h1>我是小小</h1>
 <p>我是<span>小小</span></p>
</body>

tip：使用絕對單位的好處是，在祖先元素的字體大小變化時，不會出現(xiàn)意外的連鎖反應。

font-style

字體樣式

值	描述
normal	默認值。瀏覽器顯示一個標準的字體樣式。
italic	瀏覽器會顯示一個斜體的字體樣式。（斜體代表強調含義所以還是用em）
oblique	瀏覽器會顯示一個傾斜的字體樣式。
inherit	規(guī)定應該從父元素繼承字體樣式。

font-weight

字體粗細

這個貌似沒什么好說的，還是過了吧。主要一點最好使用bold，normal當然strong標簽是加粗的狀態(tài)，你們應該懂我的意思。

font-variant

字體變化

值	描述
normal	默認值。瀏覽器會顯示一個標準的字體。
small-caps	瀏覽器會顯示小型大寫字母的字體。
inherit	規(guī)定應該從父元素繼承 font-variant 屬性的值。

font

簡寫，復合寫法
強調兩個規(guī)則

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代表的是倍數(shù)。

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

如果你們想要了解或者想要深入學習java和web可以進我的群里進行交流學習,群號：web330336289，java644038439。歡迎我們進去交流學習，我們一同學習一同行進，我覺得程序員不應該中止腳步，而是一向在學習的道路上一向行進。

編碼：天弘

效的CSS寫法中的一條就是使用簡寫。通過簡寫可以讓你的CSS文件更小，更易讀。而了解CSS屬性簡寫也是前端開發(fā)工程師的基本功之一。今天我們系統(tǒng)地總結一下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:數(shù)字+單位;

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——黑色。默認的顏色是該規(guī)則中的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; //最多可用四個值，縮寫規(guī)則類似盒子大小的縮寫，下同  
border-style：solid dashed dotted groove;  
border-color:red blue white black;

outline

outline類似border，不同的是border會影響盒模型，而outline不會。

outline-width:數(shù)字+單位;

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

它會清除所有默認的列表樣式，比如數(shù)字或者圓點。

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中定義了圖片，那么圖片的優(yōu)先級要比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中新加入的屬性，用來實現(xiàn)圓角邊框。這個屬性目前不好的一點兒是，各個瀏覽器對它的支持不同，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(圓角半徑)

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

呃，是不是你已經看的眼花了？這只是要實現(xiàn)左上角不是圓角，其它三個角都是圓角的情況。所以對于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 工業(yè)web組態(tài)-開發(fā)自定義的組件（炫酷按鈕）
下一篇：HTML 編輯器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

Canvas學習筆記 - 文本操作

簡介

strokeText()方法

示例：strokeText()方法示例

您的項目需求