HTML5 canvas入門之繪製文字

2021-10-12 16:06:24 字數 1606 閱讀 2311

>

>

charset

="utf-8"

>

>

title

>

>

*style

>

head

>

>

"canvas"

width

="800px"

height

="800px"

style

="border

: 1px solid black;

">

canvas

>

>

// 獲取上下文(必須)

var canvas = document.

getelementbyid

("canvas"

)var context = canvas.

getcontext

("2d"

)// linewidth是針對於stroke而言的

context.linewidth=

40 context.fillstyle=

"red"

context.strokestyle=

"yellow"

// 設定字型大小和font-family

context.font=

"70px weiruanyahei"

// 設定字型對齊方式:textalign:center/start/end/left/right

// 是以起點位置為基準的

context.textalign=

"center"

// 設定文字的基線:textbaseline:top/hanging/middle/alphabetic/ideographic/bottom

context.textbaseline=

"bottom"

// 繪製文字:filltext/stroketext()

// 帶五個引數(文字內容,起始位置x,起始位置y,寬度)

context.

filltext

("hello world"

,350

,400

)// context.stroketext("hello yahei",100,200)

// 設定陰影

// conext.shadowblur/shadowoffsetx/shadowoffsety/shadowcolor

// 分別為陰影的模糊程度/陰影在x方向的偏移量/陰影在y方向的偏移量/陰影顏色

// 使用透明度

// context.globalalpha=[0,1]

context.

beginpath()

context.globalalpha=

0.5 context.fillstyle=

"red"

context.

fillrect

(350

,400,20

,20)script

>

body

>

html

>

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法,方法定義如 arc x,y,radius,startangle,endangle,countercl...

HTML5 canvas擦除無效

部分安卓手機上會出現canvas內圖表重疊,並且清除無效,屬於偶現缺陷,非常難以確定其產生原因,比如下圖這個樣子,第一次繪製的圖形沒有擦除,導致第二次繪製時出現重影 初步考慮為裝置自身問題,引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後,發現在每次擦除 cle...

HTML5canvas時鐘例項

直接放 不太好,還是簡單說說運用到的canvas知識 1 canvas 元素用於在網頁上繪製圖形。id c width 1000 height 400 canvas 2 canvas2d環境下繪製 var ogc oc.getcontext 2d 3 我要開始繪製路徑啦 ogc.begin path...