为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 cv2的视频检测:睁眼闭眼

    如题,想实现一个简单的根据摄像头的某一帧检测睁眼闭眼的功能. 初步的想法是: 1. cv2调用计算机摄像头,读取某一帧的画面. 2. 将该画面作为 哈尔-人脸分类器的输入接口,根据分类器结果返回分类的 ...

  2. putty ssh常用命令小结

    打开putty 输入VPS的IP地址输入root回车输入密码回车 vps 更改文件夹所属组 cd /home/vpsuser/domains/afish.cnblogs.com/ chown -R v ...

  3. 用Maven搭建简单的SpringMVC框架

    本文会详细阐述如何用Maven搭建一个简单的SpringMVC框架 这里就不介绍SpringMVC框架了,咱们直接来搭建 第一步 创建一个Maven的web项目  这里有一个简单的方法 new一个Ma ...

  4. div中的图片跑出来

    一:div中的图片跑出来 <style> /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> < ...

  5. Groovy assert 断言抛字出来

  6. safari兼容时间格式 NAN

    问题: safari中不支持2018-08-01这种格式转为时间戳会显示NaN 方案: new Date('2018/08/01').getTime() 将-转化为/ // 正则替换 new Date ...

  7. 【GDOI2013模拟4】贴瓷砖

    题目 A镇的主街是由N个小写字母构成,镇长准备在上面贴瓷砖,瓷砖一共有M种,第i种上面有Li个小写字母,瓷砖不能旋转也不能被分割开来,瓷砖只能贴在跟它身上的字母完全一样的地方,允许瓷砖重叠,并且同一种 ...

  8. 面向对象this关键字的内存图解

    this:哪个对象调用方法,this就代表哪个对象 案例1: //定义老师类 class Teacher { private String name; private int age; public ...

  9. #419 Div2 Problem B Karen and Coffee (统计区间重叠部分 && 前缀和)

    题目链接 :http://codeforces.com/contest/816/problem/B 题意 :给出 n 表示区间个数,限定值 k 以及问询次数 q,当一个数被大于或等于 k 个区间重复覆 ...

  10. Python3学习笔记（八）：集合

    集合(set)是一种可变的无序的不重复的数据类型 要创建集合,需要将所有项(元素)放在花括号({})内,以逗号(,)分隔. >>> s = {'p','y','t','h','o', ...