Skip to content

Instantly share code, notes, and snippets.

@fillano

fillano/html5 canvas text

Created October 21, 2010 15:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fillano/638711 to your computer and use it in GitHub Desktop.
Save fillano/638711 to your computer and use it in GitHub Desktop.
Download ZIP
簡單的文字繪製示範
Raw
html5 canvas text
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
div {
background: #AACCEE;
border: solid 1px #336699;
margin: 10px;
padding: 5px;
border-radius: 5px;
display: inline-block;
text-align: center
}
canvas {
cursor: pointer;
}
</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
var ctx = $('#canvas')[0].getContext('2d');
var top = 50;
$('#paste').bind('click', function(){
ctx.fillText($('#test').val(), 50, top);
top += 20;
});
});
</script>
</head>
<body>
<div id="container"><canvas id="canvas" width="640" height="480"></canvas></div>
<input id="test"><input type="button" id="paste" value="貼上">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment