Home » スタッフBlog » 様々な言語を利用した開発

様々な言語を利用した開発

category : スタッフBlog 2015.3.2 

技術部の大矢です。

現在、私は車の販売オークションシステムの開発に携わっています。
このシステムの画面はhtml、javascript、クライアント側はVC#、PHP、サーバー側はjavaで作成しており、
私は主にhtml、javascript、css、java、PHPを利用して開発を行っております。

スタッフブログ画像

 

最近では、新機能としてスマートフォンでもオークションができるようにするため、
スマートフォンのサンプルイメージを作成しました。
それに伴い、cssでアニメーションを作成したり、Canvasで複雑な図形を描いたり、カーソル画像を加工したりの作業を行っています。

ここでは、Canvasを利用した一例をご紹介します。

◆Canvasを利用して商品の画像の上に図形表示
<div class=”block” style=”background-color:#000000;position: relative;”>
<img src=”XXX.jpg” width=”360″ height=”190″>
<canvas id=”canvasBox” width=”360″ height=”53″ style=”position: absolute; top: 135px; left: 0px; width: 360px;”></canvas>
</div>
画像とcanvasを重ねて作成する

◆canvasを利用して多角形を作成する。
<script>
onload = function() {
sample();
};
function sample() {
//描画コンテキストの取得
var canvas = document.getElementById(‘canvas’);
if (canvas.getContext) {
var ctx = canvas.getContext(‘2d’);
//ここに具体的な描画内容を指定する
//新しいパスを開始する
ctx.beginPath();
//パスの開始座標を指定する
ctx.moveTo(50,5);
//座標を指定してラインを引いていく
ctx.lineTo(40,5);
ctx.lineTo(5,30);
ctx.lineTo(40,55);
ctx.lineTo(50,55);
ctx.lineTo(15,30);
//塗りつぶし
ctx.fillStyle = “rgb(255,0,255)”;
//輪郭形状
ctx.strokeStyle = “rgb(0,0,0)”;
//線の幅
ctx.lineWidth = 5;
//パスを閉じる(最後の座標から開始座標に向けてラインを引く)
ctx.closePath();
//現在のパスを輪郭表示する
ctx.stroke();
//塗りつぶしを表示する
ctx.fill();
}
}
</script>

様々な言語が入り組んでいる開発は初めてでとても大変ですが、
楽しく学びながら仕事をしています。

タグ

サイト内検索

Copyright(c) 2015 IT-TERA All Rights Reserved.