交互绘制文本.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();
}