HTML5 Canvas的文本設(shè)置字體和大小,可以使用的字體在畫布范圍內(nèi)的屬性。
創(chuàng)新互聯(lián)于2013年創(chuàng)立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都網(wǎng)站制作、網(wǎng)站建設(shè)網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元錫山做網(wǎng)站,已為上家服務(wù),為錫山各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575
下面是一個簡單的實例,基本語法:
context.font=[value];
HTML5 Canvas Text Font Size 例子
!DOCTYPE HTML
html
head
titlehtml5_canvas_text_size/title
style
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
/style
script
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 150;
var y = 100;
context.font = "40pt Calibri";
context.fillText("Hello WEBJX!", x, y);
};
/script
/head
body
canvas id="myCanvas" width="578" height="200"
/canvas
/body
/html
設(shè)置html5中字體的大小,首先需要理解是css中的font屬性,通過font-size來改變字體的大小,設(shè)置的方式,一般都是通過給這個元素的一個id或者是class來設(shè)置,具體看下面代碼:
html
head
style
#round{
width:400px;
height:200px;
}
#round p{
color:#f00; //設(shè)置字體顏色為紅色;
}
/style
/head
body
div id="round"
p測試文字/p
/div
/body
/html
一般你在用電腦做手機(jī)網(wǎng)頁的時候,瀏覽器顯示的比例和手機(jī)的比例為50%,就是說你在瀏覽器上面正常的內(nèi)容在手機(jī)上只有50%的整體大小適配,所以說在瀏覽器做調(diào)試的時候把預(yù)覽圖縮小50%,然后調(diào)試各種屬性的大小,顯示正常后放到手機(jī)上就完美了
在設(shè)置顏色時有多種方法:
采用顏色的英文單詞 比如 red 指紅色
采用#號,后面跟6位的16進(jìn)制數(shù)字,比如:#ff0000 表示紅色?每個數(shù)字的取值為0~9,a~f(a表示10,f表示15)。當(dāng)?shù)?~2位、第3~4位、第5~6位的數(shù)字分別相同時,可以縮寫為3位,如?#ff0000可以縮寫為 #f00, #3399ff可以縮寫為#39f。對于#3699ff此類不滿足條件的顏色值則不能縮寫
采用rgb數(shù)值表示法,比如 rgb(255, 0, 0); 表示紅色,三個數(shù)字分別表示紅、綠、藍(lán),取值范圍為0~255
采用rgba數(shù)值表示法,比如rgba(255, 0, 0, 0.5); 表示50%透明度的紅色,最后一個數(shù)字表示透明度,取值為0~1之間的小數(shù),0表示全透明,1表示不透明。
1、定義要設(shè)置的文字范圍,并用span標(biāo)簽包圍
2、編寫span的class,定義color屬性。
html代碼如下:
p這是一個測試 span class="redText"顏色/span 的例子/p
css編寫如下:
.redText
{
color: red;
}
html5和html的區(qū)別
1.HTML和HTML5都是HTML,只不過通常我們說的HTML只的是HTML4.0版本或者之前的版本,而HTML5是w3c發(fā)布的最新的HTML版本,也就是說HTML和HTML5是HTML的不同版本。
2.首先介紹一下HTML是什么,HTML的專業(yè)定義是超文本標(biāo)記語言,所謂的超文本就是不只是文本,還有圖片、音頻、視頻等等都是可以的標(biāo)記的,HTML語言是瀏覽器執(zhí)行的,用于告訴瀏覽器要顯示什么和如何顯示,通俗的講就是告訴瀏覽器以什么樣的板式樣式來顯示我們的超文本內(nèi)容,我們平時的網(wǎng)頁就是HTML結(jié)合一些其他的語言制作的。
3.HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點,如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能,可以真正改變用戶與文檔的交互方式。
4.html5除了更加適合開發(fā)移動端還有很多新的特性如:
5.語義特性,HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa的,微數(shù)據(jù)與微格式等方面的支持,構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。
6.本地存儲特性,基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間,更快的聯(lián)網(wǎng)速度,這些全得益于HTML5 APP Cache,以及本地存儲功能。Indexed DB(html5本地存儲最重要的技術(shù)之一)和API說明文檔。
7.設(shè)備兼容特性 ,HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇,帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,例如視頻影音可直接與microphones及攝像頭相聯(lián)。
8.三維、圖形及特效特性,基于SVG、Canvas、WebGL及CSS3的3D功能,用戶會驚嘆于在瀏覽器中,所呈現(xiàn)的驚人視覺效果。
9.CSS3特性,在不犧牲性能和語義結(jié)構(gòu)的前提下,CSS3中提供了更多的風(fēng)格和更強的效果。此外,較之以前的Web排版,Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性。等等。
文章題目:html5設(shè)置字體,html5設(shè)置字體間距
路徑分享:http://jinyejixie.com/article22/dsdipcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、微信公眾號、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)