【canvasでお絵描き】オリーブしまちゃんを描いてまばたきさせる

どうも。オリーブしまちゃんです。

まばたきさせたらめちゃくちゃ可愛いねぇ。クリックすると移動もするよぉ。これだけでずっと眺めていられるねぇ。

今回のコード

var olive = function() {
var name = "olive"
var target = $('#' + name);
var wrapper = target.parent(".canvas-wrapper");
var w = wrapper.width();
var h = wrapper.height();
var count = 0;
var count2 = 0;
var clockwise;
var x = 0;
var y = 0;
target.attr('width', w);
target.attr('height', h);


var can = document.getElementById(name);
var ctx = can.getContext("2d");
var timer = setInterval(function(){
ctx.save(); //変形状態を保存
ctx.setTransform(1,0,0,1,0,0); //変形を解除
ctx.clearRect(0, 0, w, h);
ctx.restore();
ctx.beginPath();
//輪郭
ctx.fillStyle = "#6FB82B";
ctx.strokeStyle = "#6FB82B";
ctx.setTransform(1 + count*0.001, 0, 0,1 + count*0.001, x, y)

ctx.beginPath();
ctx.moveTo(50,130);
ctx.quadraticCurveTo(50, 200, 150, 200);
ctx.stroke();
ctx.fill();
//輪郭
ctx.fillStyle = "#6FB82B";
ctx.strokeStyle = "#6FB82B";
ctx.quadraticCurveTo(250, 200, 250, 130);
ctx.stroke();
ctx.fill();
//輪郭
ctx.fillStyle = "#6FB82B";
ctx.strokeStyle = "#6FB82B";
ctx.quadraticCurveTo(240, 50, 150, 50);
ctx.stroke();
ctx.fill();
//輪郭
ctx.fillStyle = "#6FB82B";
ctx.strokeStyle = "#6FB82B";
ctx.quadraticCurveTo(50, 60, 50, 130);
ctx.stroke();
ctx.fill();
//目
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(80,140);
if(count2 == 1){
ctx.quadraticCurveTo(90, 100 , 95, 140);
}else {
ctx.quadraticCurveTo(95, 140 , 95, 140);
}

ctx.stroke();
ctx.fill();
//目
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
if(count2 == 1){
ctx.quadraticCurveTo(90, 160 , 80, 140);
}else {
ctx.quadraticCurveTo(80, 140 , 80, 140);
}
ctx.stroke();
ctx.fill();
//目
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(200,140);
if(count2 == 1){
ctx.quadraticCurveTo(210, 100, 215, 140);
}else {
ctx.quadraticCurveTo(215, 140, 215, 140);
}

ctx.stroke();
ctx.fill();
//目
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
if(count2 == 1){
ctx.quadraticCurveTo(210, 160, 200, 140);
}else {
ctx.quadraticCurveTo(200, 140, 200, 140);
}
ctx.stroke();
ctx.fill();

//口
ctx.fillStyle = "#D3F1CF";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(120,160);
ctx.quadraticCurveTo(125, 170, 130, 170);
ctx.stroke();
ctx.quadraticCurveTo(135, 170, 135, 168);
ctx.stroke();
ctx.quadraticCurveTo(155, 165, 155, 170);
ctx.stroke();
ctx.quadraticCurveTo(165, 170, 170, 160);
ctx.stroke();
//葉
ctx.fillStyle = "#DEEAD2";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(70,80);
ctx.quadraticCurveTo(110, -50, 160, -40);
ctx.stroke();
ctx.fill();
//葉
ctx.fillStyle = "#DEEAD2";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(160,-40);
ctx.quadraticCurveTo(165, -20, 70, 80);
ctx.stroke();
ctx.fill();
//葉
ctx.fillStyle = "#0B9645";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(70,80);
ctx.quadraticCurveTo(130, -40, 160, -40);
ctx.stroke();
//葉
ctx.fillStyle = "#0B9645";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(70,80);
ctx.quadraticCurveTo(200, -20, 240, 50);
ctx.stroke();
ctx.fill();
//葉
ctx.fillStyle = "#0B9645";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(240,50);
ctx.quadraticCurveTo(260, 40, 70, 80);
ctx.stroke();
ctx.fill();
//葉
ctx.fillStyle = "#0B9645";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(70,80);
ctx.quadraticCurveTo(200, 0, 240, 50);
ctx.stroke();
if(clockwise) {
count++;
}else {
count--;
}
if(count>10){
clockwise = false;

}
if(count < 0) {
clockwise = true;
count2 = 0;
}
if(count == 0) {
count2 = 1;
}
},100);

function onClick(e) {
var rect = e.target.getBoundingClientRect();
x = e.clientX - rect.left -100;
y = e.clientY - rect.top -100;
}

$('#olive').on('click',function(e){
onClick(e);
});
}
window.onload = function() {
olive4Koma();
}