html5-磊哥

时间:2021-12-26 21:23:52

html5-磊哥<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>chp3-2</title>
        <meta name="description" content="" />
        <meta name="author" content="Administrator" />
                <script>
                    window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded() {
                        canvasApp();
                    }

function canvasApp() {
                        var message = "your text";
                        var fillOrStroke = "fill";
                        var fontSize = "50";
                        var fontFace = "serif";
                        var fontWeight = "normal";
                        var fontStyle = "normal";
                        var textBaseline = "middle";
                        var textAlign = "center";
                        var shadowX = 1;
                        var shadowY = 1;
                        var shadowBlur = 1;
                        var shadowColor = "#000000";
                        var textAltha = 1;

var theCanvas = document.getElementById("canvas");
                        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("textFont");
                        formElement.addEventListener("change", textFontChanged, false);

formElement = document.getElementById("fontWeight");
                        formElement.addEventListener("change", fontWeightChanged, false);

formElement = document.getElementById("fontStyle");
                        formElement.addEventListener("change", fontStyleChanged, false);

formElement = document.getElementById("textBaseline");
                        formElement.addEventListener("change", textBaselineChanged, false);

formElement = document.getElementById("textAlign");
                        formElement.addEventListener("change", textAlignChanged, 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("textAlpha");
                        formElement.addEventListener("change", textAlphaChanged, false);

drawScreen();

function drawScreen() {
                            context.clearRect(0, 0, theCanvas.width, theCanvas.height);
                            context.fillStyle = "#ffffaa";
                            // context.fillRect(0, 0, theCanvas.width, theCanvas.height);

context.strokeStyle = "#000000";
                            // context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);

context.font = "50px serif";
                            context.textBaseline = textBaseline;
                            context.textAlign = textAlign;
                            context.globalAlpha = textAlpha;
                            context.shadowColor = shadowColor;
                            context.shadowOffsetX = shadowX;
                            context.shadowOffsetY = shadowY;
                            context.shadowBlur = shadowBlur;

var metrics = context.measureText(message);
                            var textWidth = metrics.width;

context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
                            //canvas中间点
                            var xPosition = (theCanvas.width - textWidth) / 2;
                            var yPosition = theCanvas.height / 2;

switch (fillOrStroke) {
                                case "fill":
                                    context.fillStyle = "#ff0000";
                                    context.fillText(message, xPosition, yPosition);
                                    break;
                                case "stroke":
                                    context.strokeStyle = "#FF0000";
                                    context.strokeText(message, xPosition, yPosition);
                                    break;
                                case "both":
                                    context.fillStyle = "#ff0000";
                                    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 fillOrStrokeChanged(e) {
                            var target = e.target;
                            fillOrStroke = target.value;
                            drawScreen();
                        }

function textSizeChanged(e) {
                            var target = e.target;
                            fontSize = 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 textAlignChanged(e) {
                            var target = e.target;
                            textAlign = target.value;
                            drawScreen();
                        }

function textBaselineChanged(e) {
                            var target = e.target;
                            textBaseline = 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();
                        }

}
        </script>

</head>

<body>
        <div style="position: absolute; top:50px; left: 50px; width:500px; height:900px; border:3px solid #00ff90">
            <canvas id="canvas" width="500"height="300">

</canvas>
            <form>
                Text:
                <input id="textBox" placeholder="your text" />
                <br>
                Fill Or Stroke:
                <select id="fillOrStroke">
                    <option value="fill">fill</option>
                    <option value="stroke">stroke</option>
                    <option value="both">both</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 />
                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 />
                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 />
                Text Size:
                <input type="range" id="textSize" min="0" max="200" step="1" value="50" />
                <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" max="1" step="0.1" value="1" />
                <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="#000000" />
            </form>
        </div>
    </body>
</html>