萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言(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影片資料分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!