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)指定されたポイントが、在のパス上に存在するかどうかを返す。fontCSSの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の内容をキャンバスにき出す。
我把常用的标签用黄色标记了，请大家注意
?
?
?
?