[jQuery] jCanvasでアンパンマンの顔を描いてみる。
jCanvasの基本的な図形や線の描き方は分かってきたのでアンパンマンの顔にチャレンジ。
円と楕円があればとりあえず出来るはずと思いやってみました。
結果、手間がかかる！
そしてあまり出来が良くないという結果になりました。
Contents
使用したメソッド
drawArc
孤を描くメソッド。
輪郭と口を描くのに使用
drawEllipse
楕円を描くメソッド
目・鼻・頬を描くのに使用
drawQuadratic
曲線を描くメソッド
眉と頬の枠線を描くのに使用
drawRect
四角形を描くメソッド
鼻と頬のテカリ部分を描くのに使用
輪郭
drawArcで円を描く
.drawArc({
fillStyle: '#F1BB93',
x: 150,y: 120,
radius: 60
})色は肌色っぽいのを選ぶ。
そういえば、現在は肌色っていう言葉は使わないみたいですね。肌の色はそれぞれ違うということで。
多様性ってやつですね。
仕上がりはこんな感じ。
目
drawEllipseで縦長の楕円を描きます。
//左目
.drawEllipse({
fillStyle: '#000000',
x: 170, y: 100,
width: 15, height: 20
})
//右目
.drawEllipse({
fillStyle: '#000000',
x: 130, y: 100,
width: 15, height: 20
})こんな感じで出力されます。
眉毛
drawQuadraticで曲線を描く
思うようなカーブが描けませんでした。
//右眉
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 115, y1: 90, // Start point
cx1: 130, cy1: 60, // Control point
x2: 145, y2: 90 // End point
})
//左眉
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 155, y1: 90, // Start point
cx1: 170, cy1: 60, // Control point
x2: 185, y2: 90 // End point
})イメージと違う仕上がりですが仕方ない。。
目と一緒に出すとこんな感じです。
鼻
drawEllipseで楕円を描き、drawRectでつやを描きます。
楕円にfillStyleを適用し、黒で縁取り。
//鼻
.drawEllipse({
fillStyle: '#da3b14',
strokeStyle: '#000',
strokeWidth: 3,
x: 150, y: 120,
width: 40, height: 30
})
//鼻つや
.drawRect({
fillStyle: '#fff',
x: 145, y: 117,
width: 10,
height: 10
})これはなかなかいい感じ♪
頬
drawEllipseで頬の色がついている部分(これはなに？？)を描いて内側半分のみ曲線で縁取ります。
楕円も円のように角度を指定して半円とかが描ければいいのですが、、、
//右頬
.drawEllipse({
fillStyle: '#da3b14',
x: 180, y: 120,
width: 23, height: 23
})
//右頬枠
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 183, y1: 107, // Start point
cx1: 155, cy1: 120, // Control point
x2: 183, y2: 133 // End point
})
//右頬つや
.drawRect({
fillStyle: '#fff',
x: 183, y: 117,
width: 6,
height: 6
})
//左頬
.drawEllipse({
fillStyle: '#da3b14',
x: 120, y: 120,
width: 23, height: 23
})
//左頬枠
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 117, y1: 107, // Start point
cx1: 145, cy1: 120, // Control point
x2: 117, y2: 133 // End point
})
//左頬
.drawRect({
fillStyle: '#fff',
x: 118, y: 117,
width: 6,
height: 6
})黒い線がいまいち…
口
drawArcで半円を描く
.drawArc({
fillStyle:'#94513e',
strokeStyle: '#000',
strokeWidth: 3,
x: 150, y: 140,
radius: 25,
start: 90, end: 270,
closed: true
})開始地点を90度、終了地点を270度にすればOk。
これは簡単。
出力結果
すべてを合わせるとこうなります。
$('canvas')
//輪郭
.drawArc({
fillStyle: '#F1BB93',
x: 150,y: 120,
radius: 60
})
//左目
.drawEllipse({
fillStyle: '#000000',
x: 170, y: 100,
width: 15, height: 20
})
//右目
.drawEllipse({
fillStyle: '#000000',
x: 130, y: 100,
width: 15, height: 20
})
//右眉
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 115, y1: 90, // Start point
cx1: 130, cy1: 60, // Control point
x2: 145, y2: 90 // End point
})
//左眉
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 155, y1: 90, // Start point
cx1: 170, cy1: 60, // Control point
x2: 185, y2: 90 // End point
})
//鼻
.drawEllipse({
fillStyle: '#da3b14',
strokeStyle: '#000',
strokeWidth: 3,
x: 150, y: 120,
width: 40, height: 30
})
//鼻つや
.drawRect({
fillStyle: '#fff',
x: 145, y: 117,
width: 10,
height: 10
})
//右頬
.drawEllipse({
fillStyle: '#da3b14',
x: 180, y: 120,
width: 23, height: 23
})
//右頬枠
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 183, y1: 107, // Start point
cx1: 155, cy1: 120, // Control point
x2: 183, y2: 133 // End point
})
//右頬つや
.drawRect({
fillStyle: '#fff',
x: 183, y: 117,
width: 6,
height: 6
})
//左頬
.drawEllipse({
fillStyle: '#da3b14',
x: 120, y: 120,
width: 23, height: 23
})
//左頬枠
.drawQuadratic({
strokeStyle: '#000',
strokeWidth: 3,
x1: 117, y1: 107, // Start point
cx1: 145, cy1: 120, // Control point
x2: 117, y2: 133 // End point
})
//左頬
.drawRect({
fillStyle: '#fff',
x: 118, y: 117,
width: 6,
height: 6
})
//口
// Draw a black semicircle
.drawArc({
fillStyle:'#94513e',
strokeStyle: '#000',
strokeWidth: 3,
x: 150, y: 140,
radius: 25,
start: 90, end: 270,
closed: true
});出力した画像の掲載は控えます。
上記のコードを以下のページに貼り付けて実行してみて下さい。