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 谢谢两位一起努力的兄弟 谢谢超哥,谢谢祈冰哥,谢谢连老师,陈明大哥,谢谢龙哥,珍玉,谢谢廖生哥,谢谢林春 ...
随机推荐
- 基于Swoole和Redis实现的并发队列处理系统
背景 由于PHP不支持多线程,但是作为一个完善的系统,有很多操作都是需要异步完成的.为了完成这些异步操作,我们做了一个基于Redis队列任务系统. 大家知道,一个消息队列处理系统主要分为两大部分:消费 ...
- 20145122《Android开发基础》实验四实验报告
实验名称 Android开发基础 实验内容 1.Windows环境下Android Studio 2.能够运行安卓AVD模拟器 3.使用安卓虚拟手机显示HelloWorld以及自己的学号 统计的PSP ...
- 20145127《java程序设计》第八周学习总结
一.教材学习内容总结 第十四章 NIO与NIO2 NIO(New IO)-from JDK1.4 NIO2 -from Java SE 7 14.1 认识NIO Channel: 衔接数据节点(与IO ...
- 20165211 获奖感想及java课程总结
20165211 获奖感想及java课程总结 理论脱离实践是最大的不幸.--达芬奇 这句话,是我在学习Java之前,假期内写的20165211 学习基础和C语言调查里的所引用的一句话,是当时我对Jav ...
- IntelliJ IDEA 连接数据库 详细过程
IntelliJ IDEA集成了众多插件,方便开发者使用,使用其自带的Database模块就可以很方便的配置.连接到数据库,本次操作以MySQL为例,其中testjdbc数据库已经提前建好,里面有两张 ...
- xshell的Solarized Dark配色方案
之前在ubuntu, kali, mint, air下都使用这一款配色方案,后来在网上看到有人在xshell中使用,配色方案有分享,就是一起无法导入 原来这个东西在你现有的连接无法直接导入,需要重新打 ...
- Django组件(二) Django之Form
Forms组件概述 forms组件 -Django提供的用语数据校验和模板渲染的组件 -在项目中创建一个py文件 -1 写一个类继承Form -2 在类中写属性,写的属性,就是要校验的字段 -3 使用 ...
- 乘积尾零|2018年蓝桥杯B组题解析第三题-fishers
标题:乘积尾零 如下的10行数据,每行有10个整数,请你求出它们的乘积的末尾有多少个零? 5650 4542 3554 473 946 4114 3871 9073 90 4329 2758 7949 ...
- 文件查找：locate、find
文件查找:在文件系统上查找符合条件的文件: locate, find 非实时查找(数据库查找):locate //不是遍历系统文件,把当前系统目录下的所有文件抽取出来制作成一个索引(或者叫数据库), ...
- html 居中的内容显示框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...