为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. 脚本_查看当前系统每个IP的连接数

    #!bin/bash#作者:liusingbon#功能:查看当前系统每个IP的连接数netstat -n | awk '/^tcp/ {print $5}'| awk -F: '{print $1}' ...

  2. Ubuntu16.04下caffe CPU版的详细安装步骤

    一.caffe简介 Caffe,是一个兼具表达性.速度和思维模块化的深度学习框架. 由伯克利人工智能研究小组和伯克利视觉和学习中心开发. 虽然其内核是用C++编写的,但Caffe有Python和Mat ...

  3. P1086 花生采摘题解

    这道题只是普通的模拟,不是贪心! 重点在于这句话:“然后再找出剩下的植株里花生最多的,去采摘它的花生”. 也就是,你下一个必须找到剩下花生最多的,而不是按照贪心思想来考虑在限定时间内的最优解 那么,应 ...

  4. 跨域 （3） window.name

    window对象有一个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window ...

  5. 鹅厂干货 | 腾讯游戏APP协议迭代的那些事

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~. 作者:罗广镇 | 腾讯移动开发工程师 App与后台通信通常有采用json等文本协议或者采用二进制协议,本文则主要总结了心悦俱乐部App的接 ...

  6. 第四篇：存储库之mongodb、redis、mysql

    MongoDB的简单操作 一.简介 二.MongoDB基础知识 三.安装 四.基本数据类型 五.增删改查操作 六.可视化工具 七.pymongo 一.简介 MongoDB是一款强大.灵活.且易于扩展的 ...

  7. chrome获取页面element的xPath

    chrome真的是强大的工具 1.在chrome打开的页面点击F12,进入开发者模式 2.点击弹出的开发者工具左上角的跟踪箭头,再点击需要跟踪的页面元素,html程序定位到元素在程序中位置 3.选中的 ...

  8. R中的常用命令（持续更新）

    (1)工作环境 #Ctrl+L键:清屏#Ctrl+Shift+C键:注释.取消注释(仅在RStudio中)(可以多行) rm(变量) #清除某变量 ls() #列出内存中的变量 rm(list=ls( ...

  9. BZOJ 4517: [Sdoi2016]排列计数 错排 + 组合

    从 $n$ 个数中选 $m$ 个不错排,那就是说 $n-m$ 个数是错排的. 用组合数乘一下就好了. Code: #include <cstdio> #include <algori ...

  10. wannafly 挑战赛9 E 组一组 （差分约束）

    链接:https://www.nowcoder.com/acm/contest/71/E 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 65536K,其他语言131072K Spec ...