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>
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 谢谢两位一起努力的兄弟 谢谢超哥,谢谢祈冰哥,谢谢连老师,陈明大哥,谢谢龙哥,珍玉,谢谢廖生哥,谢谢林春 ...
随机推荐
- 基于qml创建最简单的图像处理程序（2）-使用c++&qml进行图像处理
<基于qml创建最简单的图像处理程序>系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面http://www.cnblogs.com/jsxyhelu/p/8 ...
- 20145127 《Java程序设计》第五次实验报告
实验简述: 在本周,我们进行了Java的第五次试验,本次实验的主要内容是结对编程.本次实验的大体过程是: 1.先进行Java的客户端与服务端的代码编写.结对是两个人,一人负责客户端,一人负责服务端. ...
- 20145321《网络对抗技术》逆向与Bof基础
20145321<网络对抗技术>逆向与Bof基础 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何 ...
- linux内核分析 1、2章读书笔记
一.linux历史 20世纪60年代,MIT开发分时操作系统(Compatible TIme-Sharing System),支持30台终端访问主机: 1965年,Bell实验室.MIT.GE(通用电 ...
- [c/c++]指针（4）
现在讲一下指针的主要用途和常见错误. [用途] 1.用作形参 首先,常见新手写交换函数: void swap(int a,int b){ int t = a; a = b; b = t; } 主函数里 ...
- 计算TCP链接的RTO超时重传时间
- Wireshark 显示域名列
一般使用Wireshark只能看到ip地址,但是看域名更方便更简明 只要修改一个配置就可以 编辑-->首选项 勾选Resolve network(IP) addresses 重新捕捉:
- 【第二十九章】 springboot + zipkin + mysql
zipkin的数据存储可以存在4个地方: 内存(仅用于测试,数据不会持久化,zipkin-server关掉,数据就没有了) 这也是之前使用的 mysql 可能是最熟悉的方式 es Cassandra ...
- [JavaScript] - form表单转json的插件
jquery.serializejson.js 之前好像记录过,做项目又用到了再记下 在页面中引入js后就可以使用了 示例: //点击设置微信信息的form表单提交按钮后,执行wxConfig的con ...
- 【TCP/IP详解 卷一：协议】第十八章 TCP连接 的建立与终止 (2)其余内容
18.5 TCP的半关闭 牢记 TCP 是 全双工 的. 半关闭:TCP提供了连接的一端 在结束了它的发送后 还能接收来自另外一端数据的能力.但是只有很少的应用程序利用它. 为了实现这个特性,编程接口 ...