HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效
为HTML添加新元素
添加新元素 + 该元素定义样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body>
</html>
创建一个画布
使用JavaScript绘制图形
canvas坐标
绘制线条
文字
渐变
1.线性渐变
2.径向/圆渐变
图像——把图像放到画布上
SVG 可伸缩矢量图形
使用XML格式定义图形
将 SVG 元素直接嵌入 HTML 页面:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
显示数学公式
黑客帝国特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hacker</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
body{
margin: 0px;
overflow: hidden;
}
</style>
</head> <body>
<!----画布---->
<canvas id="canvas" width="500" height="500" style="background-color: #000;">
</canvas>
<h1 align="center" style="background-color: #F10609;" index="2">89890809089</h1>
<script>
//获取元素
//document指向文档
//getElement获取标签
//ById 用ID命民
var canvas = document.getElementById("canvas");
//获取当前画布的权限
var ctx = canvas .getContext("2d");
/*
获取当前画布大小和屏幕一样
获取屏幕对象
获取屏幕宽和高
*/
var s = window.screen;
var w = s.width;
var h = s.height;
//赋值给画布
canvas.width = w;
canvas.height = h; //动态话字体大小
var fontsize = 24;
var drops = [];
var str = "1010101101000111010"; //一行放多少字 win / 自宽 = 字数 半个字呢?取整
var clos = Math.floor(w / fontsize);
//每个字体坐标
//创建个数组存入clos个 0 for()
for (var i = 0; i < clos;i++)
{
drops.push(0);
}
function drawString(){
//paint //给矩形区域填充颜色
ctx.fillStyle = "rgba(0,0,0,0.05)";
//画一个矩形区域
ctx.fillRect(0,0,w,h); //大小 -- 粗细 大小
ctx.font = "700 "+fontsize+"px 微软雅黑";
//color
ctx.fillStyle = "green"; for (var i = 0;i < clos;i++)
{
//x轴
var x = i*fontsize;
//y轴
var y = drops[i]*fontsize; ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);
//多次执行,只需要判
if (y > h && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
////////之后要画一个遮罩层,矩形区域,实现渐变
} }
//通过定时器多次执行
setInterval(drawString,20); console.log(drops);
</script>
</body>
</html>
HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效的更多相关文章
- Canvas修行之黑客帝国代码雨
既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...
- HTML5新增核心工具——canvas
原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...
- Canvas & SVG
Canvas & SVG https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-dev ...
- HTML5 学习03——内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- 在HTML5中怎样实现Canvas阴影效果
该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢! 今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML ...
- HTML5 的绘图支持- canvas
Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...
- HTML5 Canvas水波纹动画特效
HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
- Html5学习2(Html表格、Html列表、Html5新元素、Canvas (坐标、路径、画圆、文本、渐变、图像))
Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...
随机推荐
- xrdp远程
安装图形界面 yum groupinstall "GNOME Desktop" 安装epel源 yum install epel* 安装xrdp yum --enablerepo= ...
- Codeforces Round #575 (Div. 3) B. Odd Sum Segments (构造,数学)
B. Odd Sum Segments time limit per test3 seconds memory limit per test256 megabytes inputstandard in ...
- regsvr32 驱动
1.将SYS驱动文件放到系统目录的SYSTEM32目录中.2.按WIN+R组合键,在运行框中输入:regsvr32 sys所在全路径,点击确定即可.
- 一键部署lnmp脚本
先下载好nginx安装包,解包之后可以执行下面的脚本,一键部署 cd nginx-1.12.2 useradd -s /sbin/nologin nginx./configuremakemake in ...
- CSS基础-如何用border写三角形?
1.常用的border的单值属性(border指的是边框.) /*边框样式属性*/ border-style: solid; /*边框颜色*/ border-color: #06a43a; /*边框宽 ...
- SpringBoot + kaptcha 生成、校对 验证码
1.引入 kaptcha 的 Maven 依赖 <dependency> <groupId>com.github.penggle</groupId> <art ...
- Python 3标准库第一天讲解总结
一.很多知识自己没有理解透: 二.课件准备不足: 三.第一次讲解有点紧张: 四.口才也不是很好,很多有断片的情况: 五.SB式的坚持:
- 对js库的调研研究------引用
1. 引言 从以下几个方面来阐述这个问题: 特性. 稳定性. 性能. 包生态. 社区. 学习曲线. 文档. 工具. 发展历史. 团队. 兼容性. 趋势. 2.概述 & 精读 特性 当你调研一个 ...
- 配置文件:mainfest.xml
AndroidManifest.xml 是每个android程序中必须的文件. 它位于整个项目的根目录,描述了package中暴露的组件(activities,services, 等等),他们各自 ...
- socket模块其他用法
1.socket模块的其他方法 服务端套接字函数 s.bind() 绑定(主机,端口号)到套接字 s.listen() 开始TCP监听 s.accept() 被动接受TCP客户的连接,(阻塞式)等待连 ...