Canvas テキスト表示|Canvas Text View

Canvas テキスト表示|Canvas Text View

Canvas テキスト表示|Canvas Text View : デモ

Canvas テキスト表示|Canvas Text View : ZIPファイル(5kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <title>Canvas Text</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
        <script src="js/base.js"></script>
    </head>
    <body>
        <div id="contents">
            <canvas id="canvas" width="275" height="275"></canvas>
        </div>
    </body>
</html>

2.CSS

@charset "utf-8";
 
body
{
    margin:0;
    padding:0;
    background-color: #fff;
}
 
#contents
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height:275px;
    border: 1px solid #000;
    overflow:hidden;
}
 
#canvas
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height: 275px;
}

3.JavaScript

base.js

window.addEventListener("load", imageLoad, false);

function imageLoad() 
{
	var pattern = new Image();
	pattern.onload = init;
	pattern.src = "./images/texture.jpg";
	
	function init()
	{
		var offsetX = 0,
	    offsetY = 0,
	   	ctx,
	   	theCanvas,
	   	theContents;
	    
	    theContents = document.getElementById("contents");
	    offsetX = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).width;
	    offsetX = Number(offsetX.replace('px',''));
	 
	    offsetY = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).height;
	    offsetY = Number(offsetY.replace('px',''));
	    
	    ctx = document.getElementById('canvas').getContext("2d");
	   	ctx.clearRect(0, 0, 275, 275);
	    
	    drawCanvas();
	    
	    function drawCanvas()
	    {
	    	ctx.fillStyle = "#999999";//#RRGGBB
	    	ctx.fillRect(0, 0, 275, 275);
	    	
	    	//アルファ透明度
	    	ctx.globalAlpha = 1;
	    	
	    	//フォント設定
	    	//font-style : normal italic oblique inherit
	    	//font-weight : normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit auto
	    	//font-family : serif sans-serif cursive fantasy monospace
	    	ctx.font = "normal normal 70px Arial"; //[font-style] [font-weight] [font-size] [font-family]
	    	
	    	//テキストの位置、垂直方向 : top hanging middle alphabetic ideographic bottom
	    	ctx.textBaseline = "middle";
	    	
	    	//テキストの位置、水平方向 : center start end left right
	    	ctx.textAlign = "center";
	    	var text = "HTML5";
	    	var metrics = ctx.measureText(text);
	    	var textWidth = metrics.width;
	    	
	    	//シャドウ
	    	ctx.shadowColor = "#000000";
	    	ctx.shadowOffsetX = 2;
	    	ctx.shadowOffsetY = 2;
	    	ctx.shadowBlur = 2;
	    	
	    	//条件結果
	    	var fillType = "colorFill"; //colorFill linearGradient radialGradient pattern
	    	
	    	switch(fillType)
	    	{
	    		case "colorFill": //ベタ塗り
	    			var tempColor = "#ffffff";
	    			break;
	    		case "linearGradient": //線形グラデーション
			    	var gradient = ctx.createLinearGradient(0, 0, 100 + textWidth, 100);
			    	gradient.addColorStop(0, "#000000");
			    	gradient.addColorStop(0.5, "#ff0000");
			    	tempColor = gradient;
			    	break;
	    		case "radialGradient": //円形グラデーション
			    	gradient = ctx.createRadialGradient(150, 130, 5, 150 , 130, 250);
			    	gradient.addColorStop(0, "#ffffff");
			    	gradient.addColorStop(0.5, "#ff0000");
			    	tempColor = gradient;
			    	break;
			    case "pattern": //パターン
	    			tempColor = ctx.createPattern(pattern, "repeat");
	    			break;
	    	}
	    	
	    	//アウトラインのありなし
	    	var outLineFlag = true;
	    	if(outLineFlag)
	    	{
	    		//アウトライン
		    	ctx.strokeStyle = "#000000"; 
		    	ctx.strokeText(text, offsetX / 2, offsetY / 2);
	    	}
	    	
	    	//ベタ塗り
	    	ctx.fillStyle = tempColor; 
	    	ctx.fillText(text, offsetX / 2, offsetY / 2);
	    }
	}
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です