万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:)。
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。
《妙味课堂HTML5视频教程》 将会介绍超文本标记语言(HTML)的第五次重大修改,即最新版本;它比原来的标准又增加了一些新的标签,实现更多功能,更标准化,更适用于移动互联网。
视频播放地址:http://www.php.cn/course/418.html
本视频学习难点在于canvas的用法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿知乎背景canvas特效</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> body{ text-align: center; background: #F7FAFC; overflow: hidden; background: #fff; } </style> </head> <body> <canvas id="Mycanvas"></canvas> <script> //定义画布宽高和生成点的个数 var WIDTH = window.innerWidth, HEIGHT = window.innerHeight, POINT = 35; var canvas = document.getElementById('Mycanvas'); canvas.width = WIDTH, canvas.height = HEIGHT; var context = canvas.getContext('2d'); context.strokeStyle = 'rgba(0,0,0,0.2)', context.strokeWidth = 1, context.fillStyle = 'rgba(0,0,0,0.1)'; var circleArr = []; //线条:开始xy坐标,结束xy坐标,线条透明度 function Line (x, y, _x, _y, o) { this.beginX = x, this.beginY = y, this.closeX = _x, this.closeY = _y, this.o = o; } //点:圆心xy坐标,半径,每帧移动xy的距离 function Circle (x, y, r, moveX, moveY) { this.x = x, this.y = y, this.r = r, this.moveX = moveX, this.moveY = moveY; } //生成max和min之间的随机数 function num (max, _min) { var min = arguments[1] || 0; return Math.floor(Math.random()*(max-min+1)+min); } // 绘制原点 function drawCricle (cxt, x, y, r, moveX, moveY) { var circle = new Circle(x, y, r, moveX, moveY) cxt.beginPath() cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI) cxt.closePath() cxt.fill(); return circle; } //绘制线条 function drawLine (cxt, x, y, _x, _y, o) { var line = new Line(x, y, _x, _y, o) cxt.beginPath() cxt.strokeStyle = 'rgba(0,0,0,'+ o +')' cxt.moveTo(line.beginX, line.beginY) cxt.lineTo(line.closeX, line.closeY) cxt.closePath() cxt.stroke(); } //每帧绘制 function draw () { context.clearRect(0,0,canvas.width, canvas.height); for (var i = 0; i < POINT; i++) { drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r); } for (var i = 0; i < POINT; i++) { for (var j = 0; j < POINT; j++) { if (i + j < POINT) { var A = Math.abs(circleArr[i+j].x - circleArr[i].x), B = Math.abs(circleArr[i+j].y - circleArr[i].y); var lineLength = Math.sqrt(A*A + B*B); var C = 1/lineLength*7-0.009; var lineOpacity = C > 0.03 ? 0.03 : C; if (lineOpacity > 0) { drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity); } } } } } //初始化生成原点 function init () { circleArr = []; for (var i = 0; i < POINT; i++) { circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40)); } draw(); } //调用执行 window.onload = function () { init(); setInterval(function () { for (var i = 0; i < POINT; i++) { var cir = circleArr[i]; cir.x += cir.moveX; cir.y += cir.moveY; if (cir.x > WIDTH) cir.x = 0; else if (cir.x < 0) cir.x = WIDTH; if (cir.y > HEIGHT) cir.y = 0; else if (cir.y < 0) cir.y = HEIGHT; } draw(); }, 10); } </script> </body> </html>
登录后复制
以上就是妙味课堂HTML5视频资料分享的详细内容,更多请关注风君子博客其它相关文章!
最新评论