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 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>

html5-磊哥的更多相关文章

磊哥评测之数据库：腾讯云MongoDB vs自建
本文由云+社区发表作者:磊哥上期文章我们聊到了redis.这期我们来说说另一个网红nosql数据库:MongoDB.有这么一个介绍MongoDB的说法是:MongoDB是非关系数据库当中功能最丰富 ...
磊哥的密码箱icpc11526
问题 D: 磊哥的密码箱时间限制: 1 Sec 内存限制: 128 MB提交: 238 解决: 61[提交] [状态] [命题人:admin] 题目描述磊哥有个密码箱,里面装的都是令磊哥羞羞的 ...
恭喜磊哥喜提n+1
昨天下午两点多磊哥突然喊我下楼,第一反应是"这孙子,抽烟就直说,还说个事,你以外你是吉祥村大姐啊". 心里骂完以后我慢慢悠悠下楼了,见他在打电话我先默默点上一支,准备待他结束以后对 ...
arc路径-磊哥
不然直接设置80 90要转换成弧度比如Math.PI代表180度你就要 80*Math.PI/180190*Math.PI/180<!DOCTYPE html><html>&l ...
css3导航-磊哥
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
磊哥测评之数据库SaaS篇：腾讯云控制台、DMC和小程序
本文由云+社区发表作者:腾讯云数据库随着云计算和数据库技术的发展,数据库正在变得越来越强大.数据库的性能如处理速度.对高并发的支持在节节攀升,同时分布式.实时的数据分析.兼容主流数据库等强大的性能 ...
arc路径例子-磊哥
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> & ...
nginx中SSI问题的研究
最近感觉挺爽的,这个项目团队没有一个专门做PHP的,我是第一个进来做PHP(当然还有前端)的,哈哈,我会设计修改出适合我们业务的PHP框架,哈哈,感觉会学到很多东西的样子,前几天在组内20几个前辈面前 ...
通过PowerShell查询本机IP地址
脚本内容如下: Write-Host "本机IP地址为:"(ipconfig|findstr "IPv4")[1].split(":")[1 ...
把nc v6的源码看懂
看懂nc v6的源码! 碧桂园全部的正式环境的补丁都在我手里. 2015-11-18 2:33 谢谢两位一起努力的兄弟谢谢超哥,谢谢祈冰哥,谢谢连老师,陈明大哥,谢谢龙哥,珍玉,谢谢廖生哥,谢谢林春 ...

随机推荐

pyDay1
1.import python中的import语句是用来导入模块的. 在python的模块库中有大量的模块可供使用,要想使用这些文件需要用import语句把指定模块导入到当前程序中, 使用方法例如: ...
深入理解kafka
摘自: <kafka权威指南> 集群间成员关系 Kafka 使用Zoo keeper 来维护集群成员的信息.每个broker 都有一个唯一标识符,这个标识符可以在配置文件里指定,也可以自动 ...
Kafka学习之（七）搭建kafka可视化服务Kafka Eagle
一.下载安装包 kafka-eagle-bin-1.2.4.tar.gz 百度云链接:链接:https://pan.baidu.com/s/1SNIkpsvs20A_Ljtx5PaMuA 密码:o4 ...
Linux系统安装telnet以及xinetd服务
Linux系统安装telnet以及xinetd服务一.安装telnet 1.检测telnet-server的rpm包是否安装 # rpm -qa telnet-server 若无输入内容,则表示没有 ...
20145122《Java程序设计》第七周学习总结
教材学习内容总结 1.在只有Lambda表达式的情况下,参数的类型必须写出来. 2.Lambda表达式本身是中性的,同样的Lambda表达式可用来表示不同目标类型的对象操作. 3.Lambda表达式只 ...
《网络攻防》实验九：web安全基础实践
本次实验在XX同学的指导下完成 1.实验后回答问题 (1)SQL注入攻击原理,如何防御 SQL注入攻击的基本原理,是从客户端合法接口提交特殊的非法代码,让其注入到服务器端执行业务的SQL中去,进而改变 ...
20145327《网络对抗》——注入shellcode并执行和Return-to-libc攻击深入
20145327<网络对抗>--注入shellcode并执行准备一段Shellcode 老师的shellcode:\x31\xc0\x50\x68\x2f\x2f\x73\x68\x68 ...
LM2596、LM2576
找来的资料,参考一下,震荡频率不一样,最大输入电压不一样. LM2576系列是的3A电流输出降压开关型集成稳压电路, ●最大输出电流:3A; ●振荡频率:52kHz; ●转换效率:75%-88%(不同 ...
解决Navicat Premium 12 连接oracle数据库出现ORA-28547的问题
1. 出现的问题... 下午工作时想连接Oracle数据库,使用的是Navicat Premium 12 . 数据库地址.用户名.密码.端口号都没有问题,但出现了ORA-28547:connectio ...
MySQL中datetime和timestamp的区别及使用
MySQL中有关TIMESTAMP和DATETIME的总结转载自iVictor,原文链接:http://www.cnblogs.com/ivictor/p/5028368.html 一.MySQL中 ...

html5-磊哥

html5-磊哥的更多相关文章

随机推荐

热门专题