您好,游客注册登录繁體
首页 >> html5 >> html5 canvas在线文本第二步设置(字体边框-不断完善中)

html5 canvas在线文本第二步设置(字体边框-不断完善中)

Journey 2015-04-27 0
浏览次数1246

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 canvas文本处理</title>
<script src="js/modernizr.js"></script>
</head>

<body>
<script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function eventWindowLoader(){
canvasApp();
}
function canvasApp(){
var message="JourneyYao";
var fillOrStroke ="fill";

if(!canvasSupport()){
return;
}

var theCanvas = document.getElementById('canvas')
var context = theCanvas.getContext("2d")

var formElement = document.getElementById("textbox")
formElement.addEventListener('keyup',textBoxChanged,false);

var formElement = document.getElementById("fillorstroke")
formElement.addEventListener('change',fillOrStrokeChanged,false);

drawScreen()
function drawScreen(){
context.fillStyle = '#ffffaa';
context.fillRect(0,0,theCanvas.width,theCanvas.height);

context.strokeStyle = '#000';
context.strokeRect(5,5,theCanvas.width-10,theCanvas.height-10);

//字体大小
context.font="50px serif";

var metrics = context.measureText(message);
//字体居中
var textWidth= metrics.width;
var xPosition=(theCanvas.width/2)-(textWidth/2);
var yPosition=(theCanvas.height/2);

//选择类型
switch(fillOrStroke){
case "fill":
context.fillStyle="#ff0000";
context.fillText(message,xPosition,yPosition);
break;
case "stroke":
context.strokeStyle="#000000";
context.strokeText(message,xPosition,yPosition);
break;
case "both":
context.fillStyle="#ff0000";
context.fillText(message,xPosition,yPosition);
context.strokeStyle="#000000";
context.strokeText(message,xPosition,yPosition);
break;

}

}
function textBoxChanged(e){
var target = e.target;
message=target.value;
drawScreen();
}
function fillOrStrokeChanged(e){
var target = e.target;
fillOrStroke=target.value;
drawScreen();
}
}

</script>
<canvas id="canvas" width="500" height="300">
你的浏览器无法使用canvas
小白童鞋;你的支持是我最大的快乐!!
</canvas>
<form>
Text:<input id="textbox" placeholder="your text" /><br />
Fill Or Stroke:
<select id="fillorstroke">
<option value="fill">fill</option>
<option value="stroke">stroke</option>
<option value="both">both</option>

</select>
</form>

</body>
</html>

 

原文地址:http://www.cnblogs.com/LoveOrHate/p/4456863.html

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<