<!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>