html5 canvas文本,html5 canvas文本处理

html5 canvas文本处理

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

canvasApp();

}

function canvasSupport(){

return Modernizr.canvas;

}

function canvasApp(){

if(!canvasSupport()){

return;

}else{

var theCanvas = document.getElementById('canvas')

var context = theCanvas.getContext("2d")

}

var message="your text"

function drawScreen(){

context.font = '50px serif';

context.fillStyle = '#ff0000';

context.fillText(message,100,80);

}

var formElement = document.getElementById("textbox")

//绑定textbox输入框

formElement.addEventListener('keyup',textBoxChanged,false);

//然后通过addEventListener()方法设置keyup事件，然后处理textBoxChanged函数

function textBoxChanged(e){

var target = e.target;

message=target.value;

drawScreen();

}

}

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

Text:

HTML5 canvas文本属性与方法

文本属性和方法 font                        设置或返回文本内容的当前字体属性 textAlign                设置或返回文本内容的当前对齐方式 start ...

html5 canvas在线文本第二步设置(字体边框)等我全部写完，我会写在页面底部