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 谢谢两位一起努力的兄弟 谢谢超哥,谢谢祈冰哥,谢谢连老师,陈明大哥,谢谢龙哥,珍玉,谢谢廖生哥,谢谢林春 ...
随机推荐
- mysql 触发器 trigger用法 two （稍微复杂的）
触发器(trigger):监视某种情况,并触发某种操作. 触发器创建语法四要素:1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/befo ...
- Quartz框架调用——运行报错:ThreadPool class not specified
Quartz框架调用——运行报错:ThreadPool class not specified 问题是在于Quartz框架在加载的时候找不到quartz.properties配置文件: 解决方案一: ...
- 20145302张薇 《网络对抗技术》 web基础
20145302张薇 <网络对抗> web基础 实验问题回答 1.什么是表单 表单在网页中主要负责数据采集功能:一般网页上需要用户输入.选择的地方都会用到表单 表单标签:即,用于确定表单所 ...
- 20145336张子扬《网络对抗》MSF基础应用
20145336张子扬 <网络对抗>MSF基础应用 实验一:主动攻击,利用ms08_067漏洞进行攻击 首先使用use exploit/windows/smb/ ms08_067 _net ...
- tf.equal的使用
tf.equal(A, B)是对比这两个矩阵或者向量的相等的元素,如果是相等的那就返回True,反正返回False,返回的值的矩阵维度和A是一样的 import tensorflow as tf im ...
- 不明原因报错集中处理:Undefined
1, NSGenericException错误 Terminating app due to uncaught exception 'NSGenericException', reason: '*** ...
- linq——group by
多列排序&&聚合函数 var result = from i in (from uh in db.UserHistories ...
- LLDP协议、STP协议 笔记
参考: 数据链路层学习之LLDP 生成树协议 LLDP协议.STP协议 笔记 LLDP 提出背景: 随着网络技术的发展,接入网络的设备的种类越来越多,配置越来越复杂,来自不同设备厂商的设备也往往会增加 ...
- 树莓派GPIO
- js循环遍历弹框，先弹出第一个之后逐步弹出第二个。。
var data = [{ "login_advertTitle": "即使生活琐碎,也要活得优雅", "login_advertCont" ...