HTML 5 canvasキャンバス

canvas用途

ゲームミニゲーム

チャートレポートChartsプラグイン

クール効果banner

シミュレータ、グラフィックエディタなど

互換性
IE 9以上およびその他のブラウザ
canvasラベル
ツールバーの

width

height

方法

getContext()パラメータ2 d/webgl

に注意
css設定の幅ハイヒールwidth/height設定の幅が異なる
Context環境
getContextメソッドによる描画環境(描画コンテキスト)(オブジェクト)描画図形の取得そのオブジェクトによるメソッド/プロパティ
基本図面
パス

moveTo()開始位置

lineTo()直線、moveTo()の最初のlineTo()がmoveTo()の代わりにない場合

パスの開始と終了

beginPath()オープンパス

closePath()オフパス現在のパスを終了し、

を自動的に閉じる.

注意:複雑なグラフィックは、必ずパス

をオンとオフにします.
線ストローク()

stroke()メソッド

strokeStyle線の色を設定

lineWidth線の太さを設定

じゅうてん

fill()パディング

fillStyle塗りつぶし色

を設定
クイック長方形ツール

rect(x,y,width,height)矩形経路

を描画する

strokeRect(x,y,width,height)線矩形

fillRect(x,y,width,height)充填矩形

clearRect(x,y,w,h)矩形をクリア(矩形範囲内の内容が消去される)

円(円弧)

arc(x,y,r,start,end,wise)円弧

を描画する

start/endは開始位置単位が弧度、360角度=2 PI、180角度=PI

最後のパラメータ時計回り(false)/反時計回り(true)デフォルトfalse

内容
テキストメソッド

strokeText(text,x,y)ストローク

fillText(text,x,y)充填字

measureText(text)は、オブジェクトの置換テキストの幅

を返す.

font属性設定サイズ、フォントcxt.fon="100px MicrosoftYaHei";

textAlignプロパティ水平位置合わせstart(デフォルト)/end/center/left/right

textBaselineプロパティ垂直整列alphabetic(デフォルト)/top/bottom/middke/hanging/ideographic

画像を描画(挿入)
画像を挿入
drawImage(img, x, y)

imgイメージのdom要素

x,yはキャンバスの位置座標

に挿入する.
画像を挿入してサイズを変更
drawImage(img, x, y, width, height)
カットした画像を挿入
drawImage(img, sx,sy,swidth,sheight, x, y, width, height)

sx/sy:画像上でトリミングを開始する位置

swidth/sheight:画像のサイズを切り取る

影

shadowColorシャドウカラー

shadowBlurシャドウのぼかし値

shadowOffsetXシャドウの左オフセット

shadowOffsettYシャドウの右オフセット

グラデーション
せんけいランプ
var grd = cxt.createLinearGradien(x, y, x1, y1);//パラメータ:x,y開始座標,x 1,y 1終了座標例えば//線形グラデーションを作成するオブジェクトvar grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black");//ランプカラーを追加します.最初のパラメータは0.0～1.0で、ランプの開始と終了の間の位置を示します.grd.addColorStop(1,"white");//グラデーション色ctxを追加します.fillStyle =grd;//キー、グラデーションを塗りつぶしスタイルに設定する
ラジアルランプ

createRadiaGradient(x1, y1, r1, x2, y2, r2)

addColorStop()

背景画像を塗りつぶし

createPattern(imgDom, repeate)

第2パラメータrepeate/repeat-x/repeat-y/no-repeat

へんかん
拡大・縮小

sacle(x, y)

へんい

translate(x, y)

回転

rotate(angle)

環境の保存とリカバリ

save()

restore()

透過性の設定

globalAlpha=number設定不透明度

グローバル設定は、キャンバス全体(描画環境)を設定する

である.
図形描画領域の定義

clip()

出力base 64符号化

canvas.toDataURL(type, encoder)

typeはmimeタイプimage/jpeg image/gif image/png image/webp

キャンバスレンダリングキャンバス
1つのキャンバスを画像の形でdrawImage()で別のキャンバスに挿入するcanvasの最適化手段です
線の設定

lineCapプロパティ線の両端の形状を設定butt/round/square

lineJoinプロパティ設定線の角度miter/bevel/round

miterLimitアトリビュートグリップ角度の最大長を設定一般的には10