029-89503350
全部建站入门设计理念制作教程SEO优化维护托管行业聚焦公司动态
上一篇 下一篇

建设Html5网站初学者实例

<建站入门>     编辑:西安网站建设公司    DATE:2018-09-28

       互联网技术如今日新月异,尤其是近一两年,各种前卫的新技术不断出现在人们视界中,比如html5css3,虽然规范仍旧在不断修订的草案中,但是现已不阻止前卫的设计师或许前端工程师们的尝试了。试图运用这种变迁带给用户不一样的特别领会。
       其实稍微仔细点看下,国外的对这两个新技术的运用现已很常见了,尤其是css3,各种圆角阴影甚至dom转换都初步用css3才结束,而在低版本的ie中选用典雅降级的处理方式。这是一个过渡阶段,总有一天,会完全过渡到那个闪耀着诱人光圈的时代。
       所以,为了与时俱进,西安麦欧科技小编也初步抽空余时间学习一下这两个更为强力的武器。并陆续将学习过程中的一些小实践分享给我们的文章读者,仅仅起个抛砖引玉的效果。可能更多的都是html5相关的知识,如canvas,或许svg。因为作为西安地区的网站建设从业者,我们都是视觉主义者,更喜欢一些有视觉冲击力的。
       至于canvas的底子api,我就不详讲了,因为有人比麦小编讲的更好。
       为了使学习不那么无趣,我喜欢做一点点好玩的东西,哪怕是很简单的。

建设Html5网站初学者实例

       【以下demo请运用新版本的现代浏览器如firefox3.0+,chrome8.0+,等等查看,ie9未经检验, 看不到效果的请拷代码本地工作】 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas math</title>
<meta name="author" content="hongru.chen" />
<style>
body {margin:0; background:#000;}
canvas {display:block; margin: 10px auto;}
</style>
<script>
var amazingline = function () {
var init = function (n, i, config) {
window[n] = this;
this.n = n;
var canvas = document.getelementbyid(i),
ctx = this.ctx = canvas.getcontext(2d);
this.t = 0;
this.r = config.radius || 300;
this.draw();
}
init.prototype = {
draw : function () {
var _this = this;
this.ctx.fillrect(0, 0, 600, 600);
this.ctx.translate(300, 300);
for (var i=0; i<45; i++) {
for (var j=-45; j<=45; j+=15) {
settimeout(new function(this.n+.drawline(+j+)), 50*this.t)
this.t ++;
}
}
},
drawline : function (i) {
this.ctx.beginpath();
this.ctx.moveto(0, this.r);
var r = math.pi/180 * i, x = (this.r * math.sin(r)) / math.sin(math.pi/2 - r)*r;
this.ctx.lineto(x, math.sin(x));
this.ctx.strokestyle=rgb(”+math.ceil(math.random()*255)+,+math.ceil(math.random()*255)+,+math.ceil(math.random()*255)+);
this.ctx.linewidth=.5;
this.ctx.stroke();
this.ctx.rotate(math.pi/360 * 30);
}
}
return init;
}();
</script>
</head>
<body>
<canvas id="canvas" width="600" height="600">your broswer dont support html5 canvas!</canvas>
<script>
new amazingline(_mytest, canvas, {radius: 300})
</script>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>body{margin:0; overflow:hidden;}</style>
<script>
onload = function () {
var c = math.cos,
s = math.sin,
w = window,
d = document.getelementbyid("canvas"),
n = 360,
c = d.getcontext("2d");
c.fillrect(0, 0, d.width = w.innerwidth, d.height = w.innerheight); 
c.globalcompositeoperation = "lighter"; 
c.linewidth = .5;
var st = setinterval(function () {
if (n >= 3) {
c.font = ""+math.ceil(120-n/3)+"px 宋体";
c.globalalpha = n / 1000; 
c.strokestyle = "hsl(" + (n + 110 % 360) + ",99%,50%)"; 
x = -n * c(n / 100); 
y = 250 - s(n / 360 ) * n / 2.5; 
c.stroketext("岑安", x + 100, y);
c.font = ""+n/3+"px georgia";
c.stroketext("html5", x + 380, y + 255);
n -= 1;
} else clearinterval(st);
}, 16)
}
</script>
</head>
<body>
<canvas id="canvas">your browser dont support html canvas!</canvas>
</body>
</html>

本文由
西安网站建设公司整理,转载请注明出处。
相关热点资讯
COPYRIGHT © 2012-2018 西安麦欧软件科技有限公司 ALL RIGHTS RESERVED  地址:西安市 · 高新区 · 唐延南路 · 逸翠园II期 i都会 · 3幢1162
电话:029-89503350 / 17792573095  陕ICP备15001814号  麦欧官网所有资料仅供参考 · 不作为签约和履约的承诺  法律顾问 · 陕西臻理律师事务所