Skip to content

Instantly share code, notes, and snippets.

@chuck0523

chuck0523/canvasByjCanvas.html

Created June 6, 2015 12:30
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 chuck0523/3640c021f0f9fd83fbe1 to your computer and use it in GitHub Desktop.
Save chuck0523/3640c021f0f9fd83fbe1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvasByjCanvas.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jCanvasの練習</title>
<script src="jquery.min.js"></script>
<script src='jcanvas.min.js'></script>
</head>
<body>
<canvas width="300" height="300"></canvas>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script>
var centCanvas = function(){
var w = $(window).width(),
h = $(window).height(),
cw = $('canvas').outerWidth(),
ch = $('canvas').outerHeight();
cl = (w-cw)/2, ct = (h-ch)/2;
$('canvas').css({'top':ct,'left':cl});
}
centCanvas();
var canvasStyle = {
'position' : 'absolute',
'background-color': '#ccc'
}
$('canvas').css(canvasStyle);
$('canvas').drawText({
fillStyle : '#5cc',
strokeStyle : '#599',
strokeWidth : 2,
x : 150,
y : 100,
fontSize : 40,
fontFamily : 'Verdana, sans-serif',
text : 'Hello Canvas!'
});
$(window).resize(function(){
centCanvas();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment