[jQuery] jCanvasでアンパンマンの顔を描いてみる。

JqueryjCanvas

jCanvasの基本的な図形や線の描き方は分かってきたのでアンパンマンの顔にチャレンジ。

円と楕円があればとりあえず出来るはずと思いやってみました。

結果、手間がかかる!

そしてあまり出来が良くないという結果になりました。

使用したメソッド

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
});

出力した画像の掲載は控えます。

上記のコードを以下のページに貼り付けて実行してみて下さい。

https://projects.calebevans.me/jcanvas/docs/arcs/

JqueryjCanvas