（1）文本的描边、填充、阴影
（2）文本的渐变填充
（3）文本的图案填充
（4）文本的属性设置及效果呈现
交互绘制文本.html
<head>
<title>交互绘制文本</title>
<style>
body {
background: #eeeeee;
}
#canvas {
margin-left: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
border: 1px solid cornflowerblue;
background: #ffffff;
}
#controls {
margin: 10px;
}
</style>
</head>
<body>
<div id='controls'>
文本内容:<input type="text" id="newText" />
<input id='drawButton' type='button' value='绘制'/>
<input id='strokeCheckbox' type='checkbox' checked/>描边
<input id='shadowCheckbox' type='checkbox' checked/>阴影
<input type='radio' name="radio" id='fillRadio' checked/>填充
<input type='radio' name="radio" id='gradientRadio' />渐变填充
<input type='radio' name="radio" id='patternRadio' />图案填充
文本的属性设置： <select id='fontSelect'>
<option value='oblique 150px lucida console'>oblique 150px lucida console</option>
<option value='200px palatino' select>200px palatino</option>
<option value='bolder 200px palatino'>bolder 200px palatino</option>
<option value='256px fantasy'>256px fantasy</option>
<option value='256px century'>256px century</option>
<option value='256px tahoma'>256px tahoma</option>
<option value='256px impact'>256px impact</option>
<option value='oblique small-caps 256px palatino'>oblique small-caps 256px palatino</option>
<option value='italic 256px copperplate'>italic 256px copperplate</option>
</select>
</div>
<canvas id='canvas' width='1200' height='800'>
Canvas not supported
</canvas>
<script src='交互绘制文本.js'></script>
</body>
</html>
交互绘制文本.js
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
strokeCheckbox = document.getElementById('strokeCheckbox'),
shadowCheckbox = document.getElementById('shadowCheckbox'),
fillRadio = document.getElementById('fillRadio'),
gradientRadio = document.getElementById('gradientRadio'),
patternRadio = document.getElementById('patternRadio'),
newText = document.getElementById('newText'),
drawButton = document.getElementById('drawButton'),
fontSelect = document.getElementById('fontSelect'),
image = new Image(),
gradient = context.createLinearGradient(0, 0,
canvas.width, canvas.height),
pattern;
// Functions..........................................................
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBackground();
if (shadowCheckbox.checked) turnShadowsOn();
else turnShadowsOff();
drawText();
}
function drawBackground() { // Ruled paper
var STEP_Y = 12,
TOP_MARGIN = STEP_Y * 4,
LEFT_MARGIN = STEP_Y * 3,
i = context.canvas.height;
// Horizontal lines
context.strokeStyle = 'lightgray';
context.lineWidth = 0.5;
while(i > TOP_MARGIN) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
i -= STEP_Y;
}
// Vertical line
context.strokeStyle = 'rgba(100,0,0,0.3)';
context.lineWidth = 1;
context.beginPath();
context.moveTo(LEFT_MARGIN,0);
context.lineTo(LEFT_MARGIN,context.canvas.height);
context.stroke();
}
//阴影倾斜角度
function turnShadowsOn() {
if (navigator.userAgent.indexOf('Opera') === -1) {
context.shadowColor = 'rgba(0, 0, 0, 0.8)';
}
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
}
function turnShadowsOff() {
if (navigator.userAgent.indexOf('Opera') === -1) {
context.shadowColor = undefined;
}
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
}
function drawText() {
var TEXT_X = 65,
TEXT_Y = canvas.height/2 + 35,
text=newText.value;
context.strokeStyle = 'blue';
if (fillRadio.checked){
context.fillStyle='rgba(0,255,255,0.5)';
context.fillText (text, TEXT_X, TEXT_Y);
}
if (gradientRadio.checked){
context.fillStyle=gradient;
context.fillText (text, TEXT_X, TEXT_Y);
}
if (patternRadio.checked){
context.fillStyle=pattern;
context.fillText (text, TEXT_X, TEXT_Y);
}
if (strokeCheckbox.checked) context.strokeText(text, TEXT_X, TEXT_Y);
}
// Event handlers.....................................................
fillRadio.onchange = draw;
gradientRadio.onchange = draw;
patternRadio.onchange = draw;
strokeCheckbox.onchange = draw;
shadowCheckbox.onchange = draw;
fontSelect.onchange = function (e) {
context.font = fontSelect.value;
draw();
};
image.onload = function (e) {
pattern = context.createPattern(image, 'repeat');
draw();
};
// Initialization.....................................................
image.src = '1.png';
context.font = fontSelect.value;
context.lineWidth = 1.0;
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'blue');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1.0, 'yellow');
drawBackground();
turnShadowsOn();
drawButton.onclick=function(e){
draw();
}
效果如图：
