`

HTML 5 Canvas API

 
阅读更多

 

Canvas API 

是HTML 5 最新增加的功能，下面我将简单的介绍一下，Canvas到底是什么

 

Canvas API 是一个画图的画板，没有画板上画不了图的，其中画板默认为width 300 height 150

基本标签

<canvas></canvas>

 

可以加入id等attribute 进行css javascript限制

 

画板开始位置为0，0点，可相应的做偏移和移动

 

如何判断浏览器是否支持那

可参考下面代码

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<script type="text/javascript">

function load()

{

try

{

document.createElement("canvas").getContext("2d");

document.getElementById("support").innerHTML = "Support";

}

catch (e)

{

document.getElementById("support").innerHTML ="Not Support";

}

}

</script>

</head>

<body onload="load();">

<div id = "support"> </div>

</body>

</html>

 

下面介绍一下浏览器对HTML 5　Canvas的支持情况

Chrome　１.０

Firefox　１.５

Internet　Expｌｏrer　不支持

Opera　９.０

Ｓａｆａｒｉ　１.３

 

那么现在就出现一个问题　Internet　Explｏｒｅｒ　不支持怎么办？

 

还好现在有一个插件ExploreCanvas　解决了这个问题

 

<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

在Html中插入上面的话就能解决

 

具体的例子我提供在下面

 

下面说明一下Canvas API的内容


プロパティ説明
width キャンバスの領域の幅(ピクセル)。省略時は300ピクセル。canvasタグのwidth属性に対応。
height キャンバス領域の高さ(ピクセル)。省略時は150ピクセル。canvasタグのheitht属性に対応。
toDataURL(type,args) キャンバスの内容をdata URL文字列で取得。
getContext(cibtextId) 描画コンテキストを取得。引数に"2d"を指定すると、2次元グラフィックス用のコンテキストを取得出来る。


参数： width，height toDataURL getContext（"2d"）// 有可能会有3d，但现在没有




プロパティ説明
canvas この描画コンテキストの基になったcanvas要素への参照。
save() 描画コンテキストの状態をスタックのトップに保存する。
restore() 描画コンテキストの状態をスタックのトップから復元
scale(x,y) 横方向の倍率xと縦方向の倍率yを与えることで、グラフィックの拡大・縮小を行なう。
translate(x,y) 横方向の差分xと縦方向の差分yを与えることで、座標を変更することができる。
transform(m11,m12,m21,m22,dx,dy) 座標変換マトリックスに直接変更を加える。複数回呼び出すと、同じ変換マトリックスに対して変更が何度も適用される。
setTransform(m11,m12,m21,m22,dx,dy) 座標変換マトリックスを初期化した後、渡された引数でtransform()の呼び出しを行なう。
globalAlpha 線や塗りつぶしを行なう際の透明度を、0.0から1.0の間で指定する(デフォルトは1.0)
globalCompositeOperation 描画領域が重なった際の挙動を指定
strokeStyle 線を描画する際のスタイル。デフォルトは黒。
fillStyle 塗りつぶしを行なう際のスタイル。デフォルトは黒。
createLinearGradient(x0,y0,x1,y1) 線形グラデーションを作成。(x0,y1)で指定した座標から、(x1,y1)に向かって直線的に色合いが変化していく
createRadialGradient(x0,y0,r0,x1,y1,r1) 円形グラデーションを作成。(x0,y0)を中心としてr0を半径とする円と、(x1,y1)を中心としてr1を半径とする円の間が、グラデーションによって塗りつぶされる。
createPattern(image,repetition) 指定されたグラフィックス要素を用いて、線や塗りつぶしのパターンを作成する。
lineWidth 線の太さをピクセル単位で指定する。デフォルトは1ピクセル。
lineCap 線の終端のスタイルを指定する。"butt"、"round"、"square"のいずれかを指定可能(デフォルトは"butt")
lineJoin 線が交差して出来る角のスタイルを指定する。"round"、"bevel"、"miter"のいずれかを指定可能(デフォルトは"miter")
shadowOffsetX 影を表示する位置のX座標。対象から何ピクセル離れているかを指定(デフォルトでは0)。
shadowOffsetY 影を表示する位置のY座標。対象から何ピクセル離れているかを指定(デフォルトでは0)。
shadowBlur 影のぼかし幅(デフォルトでは0)。
shadowColor 影の色。CSSカラーの形式に則った文字列を指定できる(デフォルトでは透明)。
clearRect(x,y,w,h) 指定した四角形の領域をクリアする。(x,y)が四角形の左上の頂点となり、wは四角形の幅、hは高さを表す。
beginPath() 新たにパス描画を開始する。それまでに描いていたパスはすべてリセットされる。
closePath パスが閉じられていない場合、最後に描画したサブパスの終点から、パスの始点に向かって直線を引くことでパスを自動的に閉じる。
move(x,y) サブパスの描画を開始する座標を移動する。
lineTo(x,y) 現在の点と指定した座標を結ぶ直線を描画。
quadraticCurveTo(cpx,xpy,x,y) 二次ベジェ曲線を描画。現在位置と、引数で渡された座標(x,y)をつなぐ曲線を描画し、曲線のカーブは(cpx,xpyの座標によって決まる)。
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 三次ベジェ曲線を描画。制御点は引数で渡した3つの座標と、現在の座標になる。
arcTo(x1,y1,x2,y2,radius) 直線とそれに接する円弧を描画
rect(x,y,w,h) 直線とそれに接する円弧を描画。
arc(x,y,radius,startAngle,endAngle,anticlockwise) 円弧を描く。完全な円を描くことも、その一部である曲線を描くことも可能
fill() パス内部を塗りつぶす。塗りつぶしの色やスタイルは、fillStyleプロパティによって指定できる。
stroke() パスを線として表示。線の色やスタイルはstrokeStyleプロパティによって指定することが可能。
clip() パスの内部をクリッピング領域として指定。クリッピング領域はbeginPath()を呼び出すことで解除が出来る。
isPointInPath(x,y) 指定されたポイントが、現在のパス上に存在するかどうかを返す。
font CSSのfontプロパティと同様で、テキストフォントを指定(デフォルトは"10px sans-serif")。
textAlign 文字列の横方向の表示位置を指定。
textBaseLine テキストが表示される位置のベースラインを指定。
fillText(text,x,y,maxWidth) 指定した文字列を、(x,y)を基準とした位置に描画。塗りつぶしのみを行なう。maxWidthを指定すると、文字列の横幅がその値に合わせて縮小される。
strokeText(text,x,y,maxWidth) 指定した文字列を、(x,y)を基準とした位置に描画。枠線の描画のみを行なう。
measureText(text) 現在のフォントを用いて文字列を描画した場合の各種情報を測定できる。
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 指定されたグラフィック要素をキャンバスに書き出す。
createImageData(sw,sh) 幅widht、高さheightからなるImageDataを作成。ImageDataは透明に初期化されている。
getImageData(sx,sy,sw,sh) 現在のキャンバスに描画されている画像をImageDataとして取得。(x,y)を左端上の頂点とし、幅width、高さheightの四角形からなる範囲のビットマップが対象となる。
putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) imagedataの内容をキャンバスに書き出す。

我把常用的标签用黄色标记了，请大家注意

 

 

 

 

0
顶
1
踩
分享到：
| CKEditor 搭建
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics