CSS canvas要素
CSS <canvas>
文字表示(fillText)
<canvas id="txtCanvas">
</canvas>
<style>
canvas
{
色・サイズ等(略)
}
</style>
<script>
$(function(){
var context = $("#txtCanvas")[0].getContext("2d");
var context = getElementById("#txtCanvas").getContext("2d");
context.font = "30pt Arial";
context.fillStyle = "blue";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText("Sample", 10, 10);
fillText(表示文字列, コンテキストからのx座標, コンテキストからのy座標, 最大幅)
});
</script>
画像表示(drawImage)
<canvas id="picCanvas">
</canvas>
<style>
canvas
{
色・サイズ等(略)
}
</style>
<script>
$(function(){
var myImg = new Image();
myImg.src = "画像パス.gif";
描画機能を有効に
var context = $("#picCanvas")[0].getContext("2d");
var context = getElementById("#txtCanvas").getContext("2d");
context.drawImage(myImg, 10, 10, 150, 100);
context.drawImage(image, dx, dy)
Canvasの座標 (dx, dy) を左上端として、image に格納されたImageオブジェクトを描画。
context.drawImage(image, dx, dy, dw, dh)
dw を横幅、dh を縦幅としたサイズに伸縮
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
元の画像をトリミングしたものをCanvas上に描画。
元の画像の (sx, sy) から、横幅 sw、縦幅 sh の領域をトリミング。
トリミングされた部分画像を、Canvasの座標 (dx, dy) に、横幅 dw、縦幅 dh のサイズに伸縮して描画。
});
</script>
CSS transform属性
<div id="parent">
移動、重ね表示が可能な<canvas>要素(html5)
<canvas id="stop">
</canvas>
<canvas id="translate">
</canvas>
<canvas id="rotate">
</canvas>
<canvas id="scale">
</canvas>
<canvas id="skew">
</canvas>
</div>
<style>
#parent
{
position: relative; /*相対位置指定*/
height: 250px;
}
canvas
{
色・サイズ等(略)
position: absolute; /*絶対位置指定*/
}
#stop
{
z-index: 40; /* 値が大きい程上に表示される */
親要素#parentからの絶対位置
left: 10px;
top: 10px;
}
#translate
{
z-index: 30; /* 値が大きい程上に表示される */
親要素#parentからの絶対位置
left: 40px;
top: 40px;
}
#rotate
{
z-index: 20; /* 値が大きい程上に表示される */
親要素#parentからの絶対位置
left: 70px;
top: 70px;
}
#scale
{
z-index: 10; /* 値が大きい程上に表示される */
親要素#parentからの絶対位置
left: 100px;
top: 100px;
}
#skew
{
z-index: 0; /* 値が大きい程上に表示される */
親要素#parentからの絶対位置
left: 130px;
top: 130px;
}
</style>
<script>
$(function(){
var myValue = 0;
var myMulti = 1;
//10ミリ秒に1回の処理
var stopTimer = setInterval(function(){
if ((myValue > 100) | (myValue < -50)) {
myMulti *= -1;
};
myValue += (0.1 * myMulti);
myTranslate('#translate',myValue);
myRotate('#rotate',myValue);
myScale('#scale', 1 + myValue * 0.01);
mySkew('#skew',myValue * 0.5);
},10);
var myRotate = function(target,value){
//回転
$(target).css({"transform" : "rotate(" + value + "deg)"});
transform: rotate(100deg); で回転処理
};
var myTranslate = function(target,value){
//移動
$(target).css({"transform" : "translate(" + value + "px, 0px)"});
transform: translate(100px,100px); で移動処理
};
var myScale = function(target,value){
//拡大/縮小
$(target).css({"transform" : "scale(" + value + ")"});
transform: scale(0.5,2); で拡大/縮小処理(1が等身大)
};
var mySkew = function(target,value){
//傾斜
$(target).css({"transform" : "skew(" + value + "deg)"});
transform: skew(30deg); で傾斜処理
複数のtransform属性を指定する場合
transform: skew(30deg) scale(2,2);
$(要素).css( { "transform : skew(30deg) scale(2,2)" } );
};
});
</script>
