HTML5新增的canvas元素技能之三

2021-08-17 03:21:01 字數 1250 閱讀 2509

4、利用canvas元素及js指令碼繪製文字

(1)設定文字的三個屬性:

a、文字樣式font=」font-weight font-sizefont-family」(字型加粗 字型大小 字型型別)

b、文字水平對齊方式textalign,屬性值有:start(預設值)、end、left、right、center

c、文字垂直對齊方式textbaseline,屬性值有:top(頂部對齊,但會留點距離)、middle(中間對齊)、bottom(底部對齊)、hanging(懸掛,緊貼頂部)、alphabetic(預設值、字母寫法)

(2)繪製文字使用上下文物件的filltext(text,x,y,[maxwidth])或stroketext(text,x,y,[maxwidth])方法進行填充或描邊,其中引數text表示要繪製的文字,x,y表示文字的起始座標,maxwidth是可選引數,表示顯示文字的最大畫素寬度,防止溢位,demo及呈現效果如下:

index.html檔案中的**如下:

canvas.js檔案中的**如下

functiondraw(id){

var canvas=document.getelementbyid(id);

var context=canvas.getcontext('2d');

context.fillstyle='green';//填充顏色為綠色

context.fillrect(0,0,800,300);//繪製填充矩形,矩形的長寬最好和畫布大小一致

context.fillstyle='#fff';//填充顏色為白色

//在繪製文字前先設定字型的屬性font、textbaseline、textalign

context.font="bold 40px '微軟雅黑','宋體'";//設定多個字型時要用逗號隔開,瀏覽器會從頭匹配合適的字型

context.textbaseline='hanging';//緊貼畫布的最上面

context.filltext('歡迎收看麥子學院推出的',10,40);

context.filltext('《html5+css3輕鬆入門與實踐》',40,100);

//最後乙個引數會防止繪製的文字溢位,將文字壓縮在最大畫素寬度之內

效果圖:

HTML5新增畫布元素canvas

canvas元素是乙個正常的html元素,相當於在頁面插入乙個畫布。在標記中設定寬 高屬性,在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性,在縮放畫布後,裡面內容也會縮放。預設情況下畫布是透明的,除非你在畫布上繪製了內容,否則是看不到它的。如果你想我證明畫布確實存在,就能看到乙個黑...

HTML5新增的canvas元素技能之一

1 利用canvas元素建立畫布 1 建立畫布 指定canvas元素的三個屬性id width 寬度 height 高度 3 使用draw函式進行繪畫 在body元素中加入 nl ad draw canvas 屬性,呼叫指令碼檔案中的draw函式,canvas的基本語法如下 2 利用canvas元素...

HTML5新增的canvas元素技能之二

3 利用canvas元素及js指令碼繪製圓形 1 表明開始繪製新路徑 利用上下文物件的beginpath 方法 2 繪製圓形路徑 利用上下文物件的arc 方法,語法是 arc x,y,radius,startangle,endangle,anticlockwise 其中 x,y 是圓的圓心,radi...