为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>

HTML5的新元素

Canvas

创建一个画布

使用JavaScript绘制图形

canvas坐标

绘制线条

文字

渐变

1.线性渐变

2.径向/圆渐变

图像——把图像放到画布上

内联SVG

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>

MathML

显示数学公式

黑客帝国特效

<!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 黑客帝国特效的更多相关文章

  1. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  2. HTML5新增核心工具——canvas

    原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...

  3. Canvas & SVG

    Canvas & SVG https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-dev ...

  4. HTML5 学习03——内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  5. 在HTML5中怎样实现Canvas阴影效果

    该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢! 今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML ...

  6. HTML5 的绘图支持- canvas

    Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...

  7. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  8. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  9. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

随机推荐

  1. Python:JPG->JPEG

    由于要在网页上使用图片渐进加载,所以需要将其他图片格式转化为JPEG格式 考虑使用python来实现批量转换 需要先安装pillow: pip  install pillow 我这里将JPG格式转化为 ...

  2. Python之网路编程之粘包现象

    一.什么是粘包 须知:只有TCP有粘包现象,UDP永远不会粘包 粘包不一定会发生 如果发生了:1.可能是在客户端已经粘了 2.客户端没有粘,可能是在服务端粘了 首先需要掌握一个socket收发消息的原 ...

  3. Zookeeper安装使用--单机模式

    1.version package准备 zookeeper-3.4.5.tar.gz 2.mkdir zookeeper folder.tar the package  mkdir zookeeper ...

  4. Rsync服务端部署流程

    Rsync服务端部署流程       Rsync服务端部署流程: 一.rsync服务端配置流程 配置rsync配置文件/etc/rsyncd.conf 创建同步的本地目录/dingjian 并根据需要 ...

  5. linux RPM(红帽软件包管理器)和Yum软件仓库中常见的命令

    RPM(红帽软件包管理器)常用命令 安装软件:rpm -ivh filename.rpm 升级软件:rpm -Uvh filename.rpm 卸载软件:rpm -e filename.rpm 查询软 ...

  6. C++ - 操作运算符

    一.操作运算符 操作运算符:在C++中,编译器有能力将数据.对象和操作符共同组成表达式,解释为对全局或成员函数的调用 该全局或成员函数被称为操作符函数,程序员可以通过重定义函数操作符函数,来达到自己想 ...

  7. 51Nod 1433 0和5 (数论 && 被9整除数的特点)

    题意 : 小K手中有n(1~1000)张牌, 每张牌上有一个一位数的数, 这个字数不是0就是5.小K从这些牌在抽出任意张(不能抽0张), 排成一行这样就组成了一个数.使得这个数尽可能大, 而且可以被9 ...

  8. JUnit——单元测试

    写了个类,要给别人用,会不会有bug?怎么办?测试一下. JUnit可以测试JDBC.Servelet.Struts.Spring.Hibernate等等. 单元测试是开发人员的工作,测试人员负责测试 ...

  9. 病毒 x

    04:病毒 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65535kB 描述 有一天,小y突然发现自己的计算机感染了一种病毒!还好,小y发现这种病毒很弱,只是会把文档中的所有字 ...

  10. css了解一下!!!

    css简介 css(cascading style sheet,层叠样式表):为了让网页的内容核样式拆分开; 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染); css语法 cs ...