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 谢谢两位一起努力的兄弟 谢谢超哥,谢谢祈冰哥,谢谢连老师,陈明大哥,谢谢龙哥,珍玉,谢谢廖生哥,谢谢林春 ...
随机推荐
- 详解 HTML5 中的 WebSocket 及实例代码-做弹幕
原文链接:http://www.php.cn/html5-tutorial-363345.html
- 20165310_java_blog_week1.md
2165310 <Java程序设计>第1周学习总结 教材学习内容总结 了解Java基本配置环境 学习Java命名.编译.运行规则 拓展学习包的编译.运行 熟悉Git的运用方式 教材学习中的 ...
- Java序列化流-ObjectOutputStream、ObjectInputStream
Java对象流的基本概念: 实例代码: 实体类User: import java.io.Serializable; /** * @author zsh * @company wlgzs * @crea ...
- JS ——DOM，BOM（包含盒模型，动画）总结
JS盒模型 content: 通过计算后样式获取padding + content: box.clientWidth | box.clientHeightborder + padding + cont ...
- bootstrap5
列表组的使用 ul.list-group > li.list-group-item *5... 列表组中可以放置徽标: 在li中放置 span.badge. bootstrap中的情景类: 实际 ...
- SQL 收集
1.union CREATE TABLE dbo.#testTab ( Id int NOT NULL ) insert into #testTab values(); insert into #te ...
- POJ 2752 Seek the Name, Seek the Fame（KMP中next的理解）题解
题意: 要求你给出每个前后缀相同的串的长度,比如: "alala"的前缀分别为{"a", "al", "ala", &q ...
- 风景区的面积及道路状况分析问题 test
参考文献: https://wenku.baidu.com/view/b6aed86baf1ffc4ffe47ac92.html #include <bits/stdc++.h> us ...
- Windows 2003 server下载
http://www.downza.cn/soft/182837.html或http://www.imsdn.cn/operating-systems/windows-server-2003/
- java 使用正则判断是不是一个数字
public class Numeric { public static void main(String[] args) { String string = "-1234.15" ...