54 lines
1.5 KiB
HTML
54 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Canvas Rotated textFill</title>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
<body>
|
|
<canvas id="test" width="500" height="500"></canvas>
|
|
<script type="text/javascript">
|
|
var canvas = document.getElementById('test');
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
|
|
ctx.fillRect(0, 0, 700, 470);
|
|
|
|
ctx.fillStyle = "white";
|
|
|
|
for (var i = 7; i < 13; i += 0.5) {
|
|
var fontSpec = "" + i + "px monospace";
|
|
ctx.font = fontSpec;
|
|
ctx.fillText(fontSpec, 20, i * 35 - 220);
|
|
}
|
|
|
|
for (var i = 7; i < 13; i += 0.5) {
|
|
var fontSpec = "" + i + "px sans-serif";
|
|
ctx.font = fontSpec;
|
|
ctx.fillText(fontSpec, 200, i * 35 - 220);
|
|
}
|
|
|
|
for (var i = 7; i < 13; i += 0.5) {
|
|
var fontSpec = "" + i + "px serif";
|
|
ctx.font = fontSpec;
|
|
ctx.fillText(fontSpec, 370, i * 35 - 220);
|
|
}
|
|
|
|
for (var i = 7; i < 13; i += 0.5) {
|
|
var fontSpec = "" + i + "pt monospace";
|
|
ctx.font = fontSpec;
|
|
ctx.fillText(fontSpec, 20, i * 35);
|
|
}
|
|
|
|
for (var i = 7; i < 13; i += 0.5) {
|
|
var fontSpec = "" + i + "pt sans-serif";
|
|
ctx.font = fontSpec;
|
|
ctx.fillText(fontSpec, 200, i * 35);
|
|
}
|
|
|
|
for (var i = 7; i < 13; i += 0.5) {
|
|
var fontSpec = "" + i + "pt serif";
|
|
ctx.font = fontSpec;
|
|
ctx.fillText(fontSpec, 370, i * 35);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |