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