canvas学习第三章

canvas学习第三章
基础知识

canvas文本API
- ctx.fillText([text],[x],[y],[width])
  - text: 在画布上渲染的文本
  - x: 文本在画布上的x坐标
  - y: 文本在画布上的y坐标
  - width：在画布上渲染文本的最大宽度
- ctx.font 设置所选用字体大小，榜重，样式，字体外观
  - font style 字体样式
  - font weight 字体榜重
  - font size 字体大小
  - font face 字体外观
- ctx.strokeText([text],[x],[y],[maxwidth])
- ctx.measureText([text]) 获得文字的宽
canvas图像API
- ctx.drawIamge(image,dx,dy)
  - image 图像对象
  - dx ，dy 定义画布上图像在左上角的位置
- ctx.drawImage(image,dx,dy,dw,dh)
  - dw和dh代表在画布上绘制图像的矩形部分的宽和高
- ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
  - sx,sy代表在画布上开始复制源图像的“原位置”
  - sw,sh代表从(sx,sy)出开始的矩形宽度与高度。
综合代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH3EX3: Text Arranger 3.0</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);  
function eventWindowLoaded() {
    canvasApp();
}
function canvasSupport () {
    return Modernizr.canvas;
}
function eventWindowLoaded() {
    var pattern = new Image();
    pattern.src = "texture.jpg";
    pattern.onload = eventAssetsLoaded;
}
function eventAssetsLoaded() {
    canvasApp();
}
function canvasApp() {
    var message = "your text"; //输入的文本
    var fontSize = "50"; //字体大小
    var fontFace = "serif"; //字体外观
    var textFillColor ="#ff0000"; //填充字体颜色
    var textAlpha =1; //透明度
    var shadowX = 1; //阴影x轴偏移
    var shadowY = 1; //阴影y轴偏移
    var shadowBlur = 1; //模糊度
    var shadowColor = "#707070"; //阴影颜色
    var textBaseline = "middle"; //文字基线
    var textAlign = "center"; //文字对齐方式
    var fillOrStroke ="fill";
    var fontWeight ="normal"; //字体榜重
    var fontStyle = "normal";
    var fillType = "colorFill";
    var textFillColor2 ="#000000";
    var pattern = new Image();
    
    if (!canvasSupport()) {
         return;
    }
    var theCanvas = document.getElementById("canvasOne");
    var context = theCanvas.getContext("2d"); 
        
    var formElement = document.getElementById("textBox");
    formElement.addEventListener("keyup", textBoxChanged, false);//监听文本框
    
    formElement = document.getElementById("fillOrStroke");
    formElement.addEventListener("change", fillOrStrokeChanged, false); 
    
    formElement = document.getElementById("textSize");
    formElement.addEventListener("change", textSizeChanged, false); 
    
    formElement = document.getElementById("textFillColor");
    formElement.addEventListener("change", textFillColorChanged, false);    
    
    formElement = document.getElementById("textFont");
    formElement.addEventListener("change", textFontChanged, false); 
    
    formElement = document.getElementById("textBaseline");
    formElement.addEventListener("change", textBaselineChanged, false); 
    
    formElement = document.getElementById("textAlign");
    formElement.addEventListener("change", textAlignChanged, false);    
    
    formElement = document.getElementById("fontWeight");
    formElement.addEventListener("change", fontWeightChanged, false);   
    
    formElement = document.getElementById("fontStyle");
    formElement.addEventListener("change", fontStyleChanged, false);    
    
    formElement = document.getElementById("shadowX");
    formElement.addEventListener("change", shadowXChanged, false);  
    
    formElement = document.getElementById("shadowY");
    formElement.addEventListener("change", shadowYChanged, false);  
    
    formElement = document.getElementById("shadowBlur");
    formElement.addEventListener("change", shadowBlurChanged, false);   
    
    formElement = document.getElementById("shadowColor");
    formElement.addEventListener("change", shadowColorChanged, false);  
    
    formElement = document.getElementById("textAlpha");
    formElement.addEventListener("change", textAlphaChanged, false);    
    
    formElement = document.getElementById("textFillColor2");
    formElement.addEventListener("change", textFillColor2Changed, false);   
    
    formElement = document.getElementById("fillType");
    formElement.addEventListener("change", fillTypeChanged, false); 
    
    formElement = document.getElementById("canvasWidth");
    formElement.addEventListener("change", canvasWidthChanged, false);  
    
    formElement = document.getElementById("canvasHeight");
    formElement.addEventListener("change", canvasHeightChanged, false);
    
    formElement = document.getElementById("canvasStyleWidth");
    formElement.addEventListener("change", canvasStyleSizeChanged, false);  
    
    formElement = document.getElementById("canvasStyleHeight");
    formElement.addEventListener("change", canvasStyleSizeChanged, false);
    
    formElement = document.getElementById("createImageData");
    formElement.addEventListener("click", createImageDataPressed, false);       
    
    pattern.src = "texture.jpg";
    
    drawScreen();
    
    function drawScreen() {
        //Background
        context.globalAlpha = 1; //全局透明度
        context.shadowColor = "#707070"; //阴影颜色
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        context.shadowBlur = 0;
        
        context.fillStyle = "#ffffaa";
        context.fillRect(0, 0, theCanvas.width, theCanvas.height);
        //Box
        context.strokeStyle = "#000000";
        context.strokeRect(5,  5, theCanvas.width-10, theCanvas.height-10);
        
        //Text
        context.textBaseline = textBaseline; //文字基线
        context.textAlign = textAlign;
        context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
        
        context.shadowColor =shadowColor;
        context.shadowOffsetX = shadowX;
        context.shadowOffsetY = shadowY;
        context.shadowBlur = shadowBlur;
        
        context.globalAlpha = textAlpha;
        
        
        var xPosition = (theCanvas.width/2);
        var yPosition = (theCanvas.height/2);
        
        var metrics = context.measureText(message);
        var textWidth = metrics.width;
        
        var tempColor;
        if (fillType == "colorFill") {
            tempColor = textFillColor;
        } else if (fillType == "linearGradient") {
            var gradient = context.createLinearGradient(xPosition-textWidth/2, yPosition, textWidth, yPosition);
            gradient.addColorStop(0,textFillColor);
            gradient.addColorStop(.6,textFillColor2);
            tempColor = gradient;
        } else if (fillType == "radialGradient") {
            var gradient = context.createRadialGradient(xPosition, yPosition, fontSize, xPosition+textWidth, yPosition, 1);
            gradient.addColorStop(0,textFillColor);
            gradient.addColorStop(.6,textFillColor2);
            tempColor = gradient;
        } else if (fillType == "pattern") {
            var tempColor = context.createPattern(pattern,"repeat")
        } else {
            tempColor = textFillColor;
        }
        switch(fillOrStroke) {
            case "fill":
                context.fillStyle    = tempColor;
                context.fillText  ( message,  xPosition ,yPosition);
                break;
            case "stroke":
                context.strokeStyle = tempColor;
                context.strokeText  ( message, xPosition,yPosition);
                break;
            case "both":
                context.fillStyle    = tempColor;
                context.fillText  ( message,  xPosition ,yPosition);
                context.strokeStyle = "#000000";
                context.strokeText  ( message, xPosition,yPosition);
                break;      
        }               
    }
    function textBoxChanged(e) { //文本框字符改变时触发
        var target =  e.target;
        message = target.value;
        drawScreen();
    }
    
    function textBaselineChanged(e) { //文字基线改变时触发
        var target =  e.target;
        textBaseline =  target.value;
        drawScreen();
    }
    
    function textAlignChanged(e) { //文字水平对齐方式改变时触发
        var target =  e.target;
        textAlign =  target.value;
        drawScreen();
    }
    
    function fillOrStrokeChanged(e) {
        var target =  e.target;
        fillOrStroke =  target.value;
        drawScreen();
    }
    
    function textSizeChanged(e) {
        var target =  e.target;
        fontSize = target.value;
        drawScreen();
    }
    
    function textFillColorChanged(e) {
        var target =  e.target;
        textFillColor = "#" + target.value;
        drawScreen();
    }
    
    function textFontChanged(e) {
        var target =  e.target;
        fontFace =  target.value;
        drawScreen();
    }
    
    function fontWeightChanged(e) {
        var target =  e.target;
        fontWeight =  target.value;
        drawScreen();
    }
    
    function fontStyleChanged(e) {
        var target =  e.target;
        fontStyle =  target.value;
        drawScreen();
    }
    
    function shadowXChanged(e) {
        var target =  e.target;
        shadowX =  target.value;
        drawScreen();
    }
    
    function shadowYChanged(e) {
        var target =  e.target;
        shadowY =  target.value;
        drawScreen();
    }
    
    function shadowBlurChanged(e) {
        var target =  e.target;
        shadowBlur =  target.value;
        drawScreen();
    }
    
    function shadowColorChanged(e) {
        var target =  e.target;
        shadowColor =  target.value;
        drawScreen();
    }
    
    function textAlphaChanged(e) {
        var target =  e.target;
        textAlpha =  (target.value);
        drawScreen();
    }
    
    function textFillColor2Changed(e) {
        var target =  e.target;
        textFillColor2 = "#" + target.value;
        drawScreen();
    }
    
    function fillTypeChanged(e) {
        var target =  e.target;
        fillType =  target.value;
        drawScreen();
    }
    
    function canvasWidthChanged(e) {
        var target =  e.target;
        theCanvas.width =  target.value;
        drawScreen();
    }
    function canvasHeightChanged(e) {
        var target =  e.target;
        theCanvas.height =  target.value;
        drawScreen();
    }
    function canvasStyleSizeChanged(e) {
        var styleWidth  = document.getElementById("canvasStyleWidth");
        var styleHeight  = document.getElementById("canvasStyleHeight");
        var styleValue = "width:" + styleWidth.value + "px; height:" + styleHeight.value +"px;";
        theCanvas.setAttribute("style", styleValue );
        drawScreen();
    }
    function createImageDataPressed(e) {
        var imageDataDisplay = document.getElementById("imageDataDisplay");
        imageDataDisplay.value = theCanvas.toDataURL();
        window.open(imageDataDisplay.value,"canavsImage","left=0,top=0,width=" + theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");
    }
}
</script> 
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
 Your browser does not support HTML 5 Canvas. 
</canvas>
<form>
  Text: <input id="textBox" placeholder="your text" />
  <br> 
  Text Font: <select id="textFont">
  <option value="serif">serif</option>
  <option value="sans-serif">sans-serif</option>
  <option value="cursive">cursive</option>
  <option value="fantasy">fantasy</option>
  <option value="monospace">monospace</option>
  </select>
  <br>
  Font Weight:
 <select id="fontWeight">
 <option value="normal">normal</option>
 <option value="bold">bold</option>
 <option value="bolder">bolder</option>
 <option value="lighter">lighter</option>
 </select>
 <br>
 Font Style:
 <select id="fontStyle">
 <option value="normal">normal</option>
 <option value="italic">italic</option>
 <option value="oblique">oblique</option>
 </select>
 <br>  
  Text Size: <input type="range" id="textSize"
       min="0"
       max="200"
       step="1"
       value="50"/> 
  <br>
  
  Fill Type : <select id="fillType">
  <option value="colorFill">Color Fill</option>
  <option value="linearGradient">Linear Gradient</option>
  <option value="radialGradient">Radial Gradient</option>
  <option value="pattern">pattern</option>
  </select>
  <br>
  Text Color: <input class="color" id="textFillColor" value="FF0000"/> 
  <br>
  Text Color 2: <input class="color" id="textFillColor2" value ="000000"/> 
  <br>
  
  Fill Or Stroke : <select id="fillOrStroke">
  <option value="fill">fill</option>
  <option value="stroke">stroke</option>
  <option value="both">both</option>
  </select>
  <br>
  Text Baseline <select id="textBaseline">
  <option value="middle">middle</option>
  <option value="top">top</option>
  <option value="hanging">hanging</option>
  <option value="alphabetic">alphabetic</option>
  <option value="ideographic">ideographic</option>
  <option value="bottom">bottom</option>
  </select>
  <br>
  Text Align <select id="textAlign">
  <option value="center">center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="left">left</option>
  <option value="right">right</option>
  
  </select>
  <br>
 Alpha : <input type="range" id="textAlpha"
       min="0.0"
       max="1.0"
       step="0.01"
       value="1.0"/>
 <br>      
 Shadow X:<input type="range" id="shadowX"
       min="-100"
       max="100"
       step="1"
       value="1"/>
<br>
Shadow Y:<input type="range" id="shadowY"
       min="-100"
       max="100"
       step="1"
       value="1"/>
  <br>
Shadow Blur: <input type="range" id="shadowBlur"
       min="1"
       max="100"
       step="1"
       value="1" /> 
<br>
Shadow Color: <input class="color" id="shadowColor" value="707070"/> 
  <br>
 Canvas Width:  <input type="range" id="canvasWidth"
       min="0"
       max="1000"
       step="1"
       value="500"/>
 <br>
  Canvas Height:
  <input type="range" id="canvasHeight"
       min="0"
       max="1000"
       step="1"
       value="300"/>
  <br>
  Canvas Style Width:  <input type="range" id="canvasStyleWidth"
       min="0"
       max="1000"
       step="1"
       value="500"/>
 <br>
  Canvas Style Height:
  <input type="range" id="canvasStyleHeight"
       min="0"
       max="1000"
       step="1"
       value="300"/>
  <br>
 <input type="button" id="createImageData" value="Create Image Data">
 <br>
 <br>
 <textarea id="imageDataDisplay" rows=10 cols=30></textarea>
 </form>
</div>
</body>
</html>