本文目录一览:
html5黑客帝国下面代码大概什么意思呀。谢啦
HTML:
canvas id="c"/canvas
CSS:
canvas {display: block;}
*** :
var c = document.getElementById("c");
var ctx = c.getContext("2d");
//全屏
c.height = window.innerHeight;
c.width = window.innerWidth;
//文字
var txts = "0123456789";
//转为数组
txts = txts.split("");
var font_size = 16;
var columns = c.width/font_size;
//用于计算输出文字时坐标,所以长度即为列数
var drops = [];
//初始值
for(var x = 0; x columns; x++)
drops[x] = 1;
//输出文字
function draw()
{
//让背景逐渐由透明到不透明
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //文字颜色
ctx.font = font_size + "px arial";
//逐行输出文字
for(var i = 0; i drops.length; i++)
{
//随机取要输出的文字
var text = txts[Math.floor(Math.random()*txts.length)];
//输出文字,注意坐标的计算
ctx.fillText(text, i*font_size, drops[i]*font_size);
//如果绘满一屏或随机数大于0.95(此数可自行调整,效果会不同)
if(drops[i]*font_size c.height || Math.random() 0.95)
drops[i] = 0;
//用于Y轴坐标增加
drops[i]++;
}
}
setInterval(draw, 33);
解释了的很详细了。
照这个图片写个HTML5网页?
form id=test
align="left"
label登录名:input value="登录名" type="text"(可包含)/labelbr
label密码:input value="密码" type="password"(至少包含6个字符)/labelbr
label再次输入密码:input value="密码名" type="password"/labelbr
性别:labelinput type="radio" name="sex" value="male"男/label
labelinput type="radio" name="sex" value="female"女/labelbr
爱好:labelinput type="checkbox"运动/label
labelinput type="checkbox"聊天/label
labelinput type="checkbox"玩游戏/labelbr
出生日期:input type="number" value="2020"年
input type="number" value="2"月
input type="number" value="2"日 br
input type="button" value="重填" onclick="document.getElementById('test').reset()" /
input type="button" value="同意以下注册条款,提交注册信息" onclick="alert('2秒 注册成功')" /
/form
HTML5模仿黑客帝国文字矩阵特效,怎么样可以确定文字显示
!DOCTYPE html
html
head
title黑客帝国效果/title
/head
body
canvas id="canvas"/canvas
style type="text/css"
body{margin: 0;
padding: 0;
overflow: hidden;}
/style
script type="text/javascript"
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var texts = '0123456789'.split('');
var fontSize = 16;
var columns = canvas.width/fontSize;// 用于计算输出文字时坐标,所以长度即为列数
var drops = [];//初始值
for(var x = 0; x columns; x++){
drops[x] = 1;
}
function draw(){
//让背景逐渐由透明到不透明
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);//文字颜色
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px arial';//逐行输出文字
for(var i = 0; i drops.length; i++){
var text = texts[Math.floor(Math.random()*texts.length)];
ctx.fillText(text, i*fontSize, drops[i]*fontSize);
if(drops[i]*fontSize canvas.height || Math.random() 0.95){
drops[i] = 0;
}
drops[i]++;}}
setInterval(draw, 33);
/script
/body
html5有哪些优点和缺点
优点:a、 *** 标准统一、HTML5本身是由W3C推荐出来的。
b、多设备、跨平台
c、即时更新,提高可用性和改进用户的友好体验;
d、有几个新的标签,这将有助于开发人员定义重要的内容;
e、可以给站点带来更多的多媒体元素(视频和音频),可以很好的替代Flash和Silverlight;
f、涉及到网站的抓取和索引的时候,对于SEO很友好;
缺点: a、安全:像之前Firefox4的web socket和透明 *** 的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
b、完善性:许多特性各浏览器的支持程度也不一样。
c、技术门槛: html5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,想web worker、web socket、web storage等新特性要求对于后台的技术需要有一定的了解,甚至需要深入了解其后面原理和逻辑,而canvas要求视觉和图像算法的一些知识,传统的前端开发者需要掌握更多算法、视觉、 后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
d、性能:某些平台上的引擎问题导致html5性能低下,同时在不加入GPU(图形处理器)加速的情况下,html5处理复杂音视频, 动画的性能不尽如人意。
e、浏览器兼容性:更大缺点,IE9以下浏览器几乎全军覆没。