<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
プロパティ
説明
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の内容をキャンバスに書き出す。 |
相关推荐
HTML5canvasAPI画矩形,清除矩形,绘制路径,画圆等
关于canvas 的api文档 主要描述canvas标签的用法
是一个很不错的绘制Canvas 的例子 ,里面有详细的事例代码,对于初学者来说真的很好的案例
HTML5 Canvas api的PPT详细讲义,一共85页PPT共9章,可供培训参考
去画布 Canvas是一个纯Go库,提供的绘图功能与HTML5 canvas API尽可能相似。 它与HTML或Javascript无关,只是使它们的功能大致相同。 支持大多数功能,但仍在进行中。 该库旨在以与Javascript API相似的方式在每个...
基于HTML5 Canvas API和SQLite,使用JavaScript编写重构SimCity 2000并开放源代码。
使用HTML5 Canvas API和jwagner的Simplex Noise库创建了五个环境网页背景
HTML5 是目前比较热门的技术,附件中介绍了Canvas的使用和Context的一些常用接口,是比较好的参考资料
html5开发
本文小编为大家介绍关于程序设计程序设计HTML5 Canvas API ,有需求的朋友可以参考一下。
主要介绍了通过HTML5 Canvas API绘制弧线和圆形的教程,用JavaScript可以自定义弧度以及设定起始终末点,使用JavaScript需要的朋友可以参考下
主要介绍了借助HTML5 Canvas API制作一个简单的猜字游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下
艺术家2D画布库介绍Artist 2D Canvas库是一个抽象层,其API受HTML5 canvas API的启发。 该库提供了根据建模的精益API。 API是各种2D平台特定的和跨平台的2D“后端”图形库(例如和之上的不太薄的层。 Artist库超越了...
主要介绍了如何用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能,文中擦除页面某片区域使其显示出背景图的例子非常实用,需要的朋友可以参考下
使用JavaScript和HTML5 Canvas API构建。 当前状态 截至2015年7月30日:尚未投入生产 完全的: 图形结构(标题,轴,标签) 基本图形类型(点,线和振幅气泡) 基本命令(例如,推送数据数组,绘制图形) 可...
主要介绍了HTML5 Canvas API中drawImage()方法的使用实例,drawImage()方法主要用来对图像进行缩放或裁剪,文中给出了其坐标及相关参数的用法,需要的朋友可以参考下
人脸检测使用 HTML5 Canvas API 在 JavaScript 中进行人脸检测。
主要介绍了使用HTML5 Canvas API绘制弧线的教程,其中重点讲解了JavaScript使用arcTo()方法根据切点绘制圆弧的方法,需要的朋友可以参考下
主要介绍了使用HTML5 Canvas API中的clip()方法裁剪区域图像的实例教程,其中需要特别注意save()和restore()方法的搭配使用,需要的朋友可以参考下