わずか8KBで直感的にCanvasが使えるjQueryプラグイン「jCanvas」

更新日: 2011/05/09 タグ: , | javascript

20110509 01

わずか8KBで直感的にCanvasを使えるjQueryプラグイン「jCanvas」が良さそうだったのでご紹介。

IT/WEB業界への転職なら求人サイトGreen

円を書く

20110509 02

↑drawArcメソッドで円を書く事ができます。
オプション引数で座標位置とサイズ、色などを指定します。

view source
print?
1$("canvas.test").drawArc({
2  fillStyle: "black",
3  x: 100, y: 100
4});

短形を書いて回転させる

20110509 03

↑rotateCanvasで回転軸の座業と角度を指定します。

view source
print?
01$("canvas.test").rotateCanvas({
02  angle: 45,
03  x: 100, y: 100
04})
05.drawRect({
06  fillStyle: "#000",
07  x: 100, y: 100,
08  width: 100, height: 50
09})
10.restoreCanvas();

グラデーションを作成する

20110509 04

↑gradientメソッドでグラーデーションオブジェクトを作成し、
描画する際に指定するとグラデーションが適用されます。

view source
print?
01var linear = $("canvas.test").gradient({
02  x1: 0, y1: 0,
03  x2: 0, y2: 100,
04  c1: "#729fcf", s1: 0.33,
05  c2: "#3465a4", s2: 0.67
06});
07$("canvas.test").drawArc({
08  fillStyle: linear,
09  x: 50, y: 50,
10  radius: 30
11})

パターン画像で埋める

20110509 05

↑画像を指定して、背景にリピート表示させています。

view source
print?
1var patt = $("canvas.test").pattern({
2  source: "images/pattern.jpg",
3  repeat: "repeat"
4})
5$("canvas.test").drawEllipse({
6  fillStyle: patt,
7  x: 200, y: 100,
8  width: 300, height: 100
9})

直線を書く

20110509 06

↑直線を書く際には座標、線幅、色などを指定できます。

view source
print?
01$("canvas.test").drawLine({
02  strokeStyle: "#000",
03  strokeWidth: 10,
04  strokeCap: "round",
05  strokeJoin: "round",
06  x1: 50, y1: 50,
07  x2: 100, y2: 150,
08  x3: 200, y3: 100,
09  x4: 150, y4: 200
10})

曲線を書く

20110509 07

↑曲線を書くには、開始点と着地点、通過する位置座標を指定します。

view source
print?
1$("canvas.test").drawQuad({
2  strokeStyle: "#000",
3  x1: 50, y1: 50,
4  cx1: 220, cy1: 50,
5  x2: 200, y2: 200
6})

他にもまだまだ出来る事があります。
使ってみたい方は下のリンクからどうぞ。

 

この記事が気に入ったら
いいね！しよう

最新情報をお届けします

follow us in feedly