下面詳細(xì)解釋都在源碼中:
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括孝南網(wǎng)站建設(shè)、孝南網(wǎng)站制作、孝南網(wǎng)頁(yè)制作以及孝南網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，孝南網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到孝南省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
!doctype htmlhtmlheadmeta charset="utf-8"title無(wú)標(biāo)題文檔/titlestyle#canvas{ background:#eee;}/style/headbodycanvas id='canvas' width="500" height='500'/canvasscriptwindow.onload=function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //平移,主要是將坐標(biāo)軸平移到中間,為了畫(huà)圓定位方便 context.translate(250,250); //定義焦距 var fos = 300; //存放小球的數(shù)組 var arr = []; for(var i = 0 ; i 8 ; i++){ var arcObj = { //半徑,用隨機(jī)數(shù)目的是讓每個(gè)小球大小不一 r:10+5*Math.random(), //起始X坐標(biāo) x:-200+i*30, //起始Y坐標(biāo) y:-100+200*Math.random(), //起始Z坐標(biāo),這里需要理解,我們要構(gòu)造的是一個(gè)三維立體小球的運(yùn)動(dòng) //則X,Y軸不能表達(dá)空間感,你需要充分的想象Z坐標(biāo)軸是順著你的眼睛的就是Z軸 z:i*10, //小球的運(yùn)行速度 speed:20 } arr.push(arcObj); } setInterval(function(){ //清除畫(huà)布,每次畫(huà)之前先將上次的清除掉.然后繪出本次的,就可以形成動(dòng)畫(huà)效果. context.clearRect(-250,-250,500,500); //將arr排序,sort()的參數(shù)則是作為一種比較規(guī)則 var newArr = arr.sort(function (a,b){ return a.z b.z }); //循環(huán)繪出剛才定義的幾個(gè)小球 for(var i = 0 ; i newArr.length ; i++){ //z軸的變化,每次變化都是 速度*時(shí)間+z = z;由于speed未定義單位,則時(shí)間可忽略 arr[i].z += arr[i].speed; //讓小球來(lái)回彈跳 if(arr[i].z 600 || arr[i].z -50){ arr[i].speed *= -1; } //這里的縮放比例,一定要注意,你要想象你眼前有個(gè)球垂直從遠(yuǎn)處飛來(lái),逐漸變大的過(guò)程,Z軸不斷增加.焦距就想象成從最初你到球的距離,通過(guò)運(yùn)動(dòng)后,現(xiàn)在到球的距離和焦距就可以形成縮放比例. var scales = fos/(fos+arr[i].z); var x1 = arr[i].x*scales; var y1 = arr[i].y*scales; //保存之前的context繪圖環(huán)境,即后續(xù)可以用context.restore方法可以恢復(fù), //目的是讓下面的context變化不影響其他的畫(huà)圖樣式. context.save(); //平移X,Y 也可以不用平移X,Y只要在下面的畫(huà)圓中定義相應(yīng)的X,Y也能達(dá)到相同的目的 context.translate(x1,y1); //將坐標(biāo)軸縮放,目的是讓小球的大小發(fā)生視覺(jué)上的變化. context.scale(scales,scales); context.beginPath(); //定義放射性顏色漸變 var colorObj = context.createRadialGradient(0,0,0,0,0,arr[i].r); colorObj.addColorStop(0,'#cbc0f3'); colorObj.addColorStop(1,'#06198b'); context.fillStyle=colorObj; context.arc(0,0,arr[i].r,0,Math.PI*2); context.fill(); context.restore(); } },50);}/script/body/html
主要要理解焦距的概念,實(shí)際開(kāi)發(fā)過(guò)程中,可能X軸,Y軸都有小球的運(yùn)動(dòng)速度分量,那才能在運(yùn)動(dòng)的過(guò)程中轉(zhuǎn)彎,撞墻等特效.
可以呀，html5 和 webgl 技術(shù)都可以用于三維可bai視化開(kāi)發(fā)。
Hightopo?提供了一套獨(dú)特的 WebGL 層抽象，將 Model–View–Presenter (MVP) 的設(shè)計(jì)模型延伸應(yīng)用到了 3D 圖形領(lǐng)域。
HT是由圖撲軟件 獨(dú)立自主研發(fā)的，基于HTML5技術(shù)標(biāo)準(zhǔn)的前端2D、3D圖形開(kāi)發(fā)框架。其提供了從SDK的API組件庫(kù)到2D 、3D編輯器到矢量圖標(biāo)和三維模型資源庫(kù)，構(gòu)成一站式的數(shù)據(jù)可視化解決方案。
可搜索 圖撲軟件 申請(qǐng)?jiān)囉茫?/p>
更多資料
圖撲軟件（Hightopo）是由廈門(mén)圖撲軟件科技有限公司獨(dú)立自主研發(fā)，基于HTML5標(biāo)準(zhǔn)技術(shù)的Web前端2D和3D圖形界面開(kāi)發(fā)框架。非常適用于實(shí)時(shí)監(jiān)控系統(tǒng)的界面呈現(xiàn)，廣泛應(yīng)用于電信網(wǎng)絡(luò)拓?fù)浜驮O(shè)備管理，以及電力、燃?xì)獾裙I(yè)自動(dòng)化 (HMI/SCADA) 領(lǐng)域。
多年來(lái)數(shù)百個(gè)工業(yè)互聯(lián)網(wǎng)可視化項(xiàng)目實(shí)施經(jīng)驗(yàn)形成了一整套實(shí)踐證明的高效開(kāi)發(fā)流程和生態(tài)體系，可快速實(shí)現(xiàn)現(xiàn)代化的、高性能的、跨平臺(tái)桌面Mouse/移動(dòng)Touch/虛擬現(xiàn)實(shí)VR圖形展示效果及交互體驗(yàn)。
CSS3除了為開(kāi)發(fā)者提供二維變形之外，還將動(dòng)畫(huà)從二維平面推動(dòng)到了三維立體狀態(tài)，能夠?qū)崿F(xiàn)真正的三維特效。
三維變形和二維變形一樣，均使用的是transform屬性。想要觸發(fā)三維變形有兩種方式：一種方式是通過(guò)語(yǔ)法告知瀏覽器“請(qǐng)采用三維方式進(jìn)行變形處理”，另一種方式是直接使用CSS3三維變形的語(yǔ)法。
觸發(fā)方法1：告知瀏覽器變形方式
-webkit-transform-style:preserve-3d;
Tips：IE不支持三維變形，在移動(dòng)端，絕大多數(shù)的瀏覽器均為WebKit內(nèi)核，因此，在此句代碼之前需要書(shū)寫(xiě)-webkit-的前綴內(nèi)核。
Tips：不要為body元素設(shè)置-webkit- transform-style: preserve 3d,否則會(huì)對(duì)position:fixed定位的元素造成布局影響。在開(kāi)發(fā)當(dāng)中，如果當(dāng)前元素屬于body的子級(jí)元素，又希望應(yīng)用三維變形，則在body和當(dāng)前元素之間多嵌套一層結(jié)構(gòu)，并為這層元素應(yīng)用三維變形即可。
觸發(fā)方法2：直接使用CSS3變形語(yǔ)法
!DOCTYPE?html
head
meta?charset="UTF-8"
title言成科技/title
style
.box1?{
width:?150px;
height:?150px;
border:?2px?solid?blue;
}
.box1?div?{
height:?150px;
background:?rgba(0,?0,?0,?0.5);
-webkit-transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);
transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);
}
/style
/head
body
div?class="box1"
div/div
/div
/body
/html
具體三維變形的具體屬性詳見(jiàn)《CSS3-3D相關(guān)知識(shí)詳解—視角以及變形方向》
3D效果制作
需求
制作一個(gè)立方體，并進(jìn)行旋轉(zhuǎn)
代碼實(shí)例
!DOCTYPE?HTML
html
head
meta?charset="utf-8"?/
title言成科技/title
link?rel="stylesheet"?type="text/css"?href=""?/
style
.main-bac?{?-webkit-perspective:1500;?}?/*設(shè)定透視距離*/
.main{
width:200px;?
height:200px;?
margin:?0?auto;
position:relative;
-webkit-transform-style:preserve-3d;
-webkit-transition:-webkit-transform?2s?ease?0s;/*過(guò)渡時(shí)間*/
}
/*基本樣式*/
.main?p{
position:?absolute;?
margin:?0;?
padding:?0;?
width:?200px;?
height:?200px;??
text-align:?center;?
line-height:?200px;?
font-size:?26px;?
opacity:0.5;
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，形成第一個(gè)面（正面）*/
.main?p:nth-of-type(1)?{
background-color:red;
-webkit-transform:translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)90度形成上面的面*/
.main?p:nth-of-type(2)?{
background-color:orange;?
-webkit-transform:rotateX(90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)-90度形成下邊的面*/
.main?p:nth-of-type(3)?{
background-color:yellow;
-webkit-transform:rotateX(-90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)90度形成右側(cè)的面*/
.main?p:nth-of-type(4)?{
background-color:green;
-webkit-transform:rotateY(90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)-90度形成左側(cè)的面*/
.main?p:nth-of-type(5)?{
background-color:#b435bf;
-webkit-transform:rotateY(-90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)180度形成后面（背面）*/
.main?p:nth-of-type(6)?{
background-color:blue;
-webkit-transform:rotateY(180deg)?translateZ(100px);
}
/*鼠標(biāo)移入時(shí)繞Y軸旋轉(zhuǎn)180度，繞Z軸旋轉(zhuǎn)180度*/
.main:hover?{-webkit-transform:rotateY(180deg)?rotateZ(180deg);?}???
/style
/head
body
div?class="main-bac"
div?class="main"
p言成科技/p
p3D立方體/p
pHTML5學(xué)堂/p
p3D立方體/p
p碼匠/p
pJavaScript/p
/div??????????????
/div
/body
/html
代碼解析
當(dāng)鼠標(biāo)移入的時(shí)候，立方體逐漸的發(fā)生旋轉(zhuǎn)（非突變），圍繞X軸旋轉(zhuǎn)45度的同時(shí)，圍繞Y軸旋轉(zhuǎn)45度。
當(dāng)鼠標(biāo)移出立方體時(shí)，立方體恢復(fù)到初始狀態(tài)。在最開(kāi)始狀態(tài)時(shí)，并沒(méi)有采用無(wú)限遠(yuǎn)的視角，設(shè)置一定的視角，讓剛開(kāi)始時(shí)直視立方體時(shí)，不會(huì)覺(jué)得是一個(gè)平面。
3D效果制作-目標(biāo)效果圖
以上資料來(lái)源：《HTML5布局之路》
html5中引入3d模型的方法是借助第三方PlayCanvas插件來(lái)完成的。
比如可以用以下方法實(shí)現(xiàn)圖片的360度旋轉(zhuǎn)：
代碼示例：
var render, loop, t, dt, //定義變量
DEG2RAD = Math.PI / 180, //角度轉(zhuǎn)弧度
cvs = document.querySelector('canvas'), //創(chuàng)建canvas
ctx = cvs.getContext('2d'),//繪制2d圖形上下文
teddy = new Image(), //創(chuàng)建圖像
heart = new Image(), //創(chuàng)建圖像中心
angle = 0,//初始化角度為0
reqAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
//創(chuàng)建動(dòng)畫(huà)幀
cvs.width = 400;
cvs.height = 200;
teddy.src = 'xxx.jpg';
heart.src = 'yyy.jpg';
//開(kāi)始渲染
render = function (timestamp) {
dt = timestamp - t;
t = timestamp;
// cavas設(shè)置為白色
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0, 0, cvs.width, cvs.height);
// 繪制中心
ctx.drawImage(heart, -20, -120);
// 繪制teddy
ctx.save();
ctx.translate(cvs.width/2, cvs.height/2); // 移動(dòng)鼠標(biāo)到畫(huà)布中心
ctx.rotate(DEG2RAD * angle); // 旋轉(zhuǎn)畫(huà)布
ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2); // 繪制中心圖片
angle += dt / 16.67 * 6; // increment angle ~ 360 deg/sec
ctx.restore();
};
loop = function (timestamp) {
reqAnimFrame(loop);
render(timestamp);
};
t = Date.now();
loop(t);
三維導(dǎo)入？HTML5本身不支持 不過(guò)現(xiàn)在有很多基于javascript+Canvas的圖形庫(kù)，可以做網(wǎng)頁(yè)的三維效果
效果稍微差點(diǎn)的是使用HTML5的Canvas提供的API去做的三維效果
有的是基于例如Chrome等瀏覽器支持的WebGL做的，效果和速度都會(huì)好些
具體可以搜一下Three.js 這個(gè)庫(kù)里面就有現(xiàn)成的三維模型導(dǎo)入的JS文件
HTML5（WEB前端）的技術(shù)組成
HTML5（WEB前端）技術(shù)由HTML（結(jié)構(gòu)）、CSS（樣式）、JavaScript（行為）組成。
如何理解結(jié)構(gòu)、樣式與行為
簡(jiǎn)單來(lái)說(shuō)，HTML5（WEB前端）是“將設(shè)計(jì)圖轉(zhuǎn)換為用戶查看的網(wǎng)頁(yè)”所需要的技術(shù)。
結(jié)構(gòu)實(shí)現(xiàn)的是網(wǎng)頁(yè)中的標(biāo)題、列表、圖片等標(biāo)簽。
樣式處理的是標(biāo)題文字的字體大小、顏色，圖片尺寸，某個(gè)標(biāo)簽的背景等。
行為可以實(shí)現(xiàn)網(wǎng)頁(yè)中的時(shí)間，電商網(wǎng)站當(dāng)中的倒計(jì)時(shí)效果，在注冊(cè)表單時(shí)用戶名是否重復(fù)的檢測(cè)，網(wǎng)站當(dāng)中頂部圖片的切換特效等等。
簡(jiǎn)單的理解結(jié)構(gòu)樣式和行為：將網(wǎng)頁(yè)看做一個(gè)裝修好的功能完備的房子，那么結(jié)構(gòu)實(shí)現(xiàn)的是房間以及家具的位置布局，樣式則是針對(duì)房間進(jìn)行裝飾，行為是為房間添加“開(kāi)門(mén)”等功能。
重慶分公司
重慶分公司
