html5-磊哥 - 爱码网

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>

            </canvas>
            <form>
                Text:
                <input ></html>