読者です 読者をやめる 読者になる 読者になる

チルノをJavaScriptで歩かせるだけ01(描画)

f:id:surume_Reflection:20160929230531p:plain
今回のためだけにこんな画像を用意 これだけで疲れた...

f:id:surume_Reflection:20160929231120p:plainf:id:surume_Reflection:20160929231128p:plainf:id:surume_Reflection:20160930002519p:plainf:id:surume_Reflection:20160929231144p:plainf:id:surume_Reflection:20160929231146p:plainチルノ戦隊!f:id:surume_Reflection:20161001134715p:plain
わかりやすくするため画像は分割して拡大縁付けした

描画

<!--html形式で保存-->
<canvas id="canvas" width="256px" height="32px"></canvas>

<script>
var canvas = document.getElementById('canvas'); //canvasをidで取得
var ctx = canvas.getContext("2d"); //描画用context取得

//imgタグ同様srcを指定
var img = new Image();
img.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/s/surume_Reflection/20160930/20160930002519.png";

//onloadでimgが読み込み完了時に処理実行
img.onload = function() { 
  //描画箇所ctx.drawImage(画像, x座標, y座標);
  ctx.drawImage(img, canvas.width/2, 0); 
}
</script>





surumereflection.hatenadiary.jp

チルノJavaScriptで歩かせるだけ
チルノをJavaScriptで歩かせるだけ01(描画) - Surume_Reflection
チルノをJavaScriptで歩かせるだけ02(歩行) - Surume_Reflection
チルノをJavaScriptで歩かせるだけ03(移動) - Surume_Reflection