請(qǐng)幫忙看看 html5 canvas 如何做到文字旋轉(zhuǎn)？我的

首先：save是保存當(dāng)前狀態(tài)，restore是返回上一次保存的狀態(tài)。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到惠來(lái)網(wǎng)站設(shè)計(jì)與惠來(lái)網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋惠來(lái)地區(qū)。

你畫出"文字1"，后旋轉(zhuǎn)，后返回（相當(dāng)于沒有旋轉(zhuǎn)），最后才畫"文字2"，所以兩次文字都不旋轉(zhuǎn)。

其次：rotate()的參數(shù)不是角度制，而是弧度制（Maht.PI相當(dāng)于180度）。

所以要旋轉(zhuǎn)30角度必須這樣寫c.rotate(Math.PI/6);

再次：旋轉(zhuǎn)之后的方向都發(fā)生了改變。

就是說(shuō)如果你先在x=200,y=200的地方畫了東西，然后旋轉(zhuǎn)30度，然后在x=200,y=200的地方畫了另一個(gè)東西，這兩個(gè)東西將不在同一個(gè)地方。（可以想象畫畫得人繞著坐標(biāo)原點(diǎn)旋轉(zhuǎn)了30度，而畫布位置沒變）

最后：附上能看見效果的代碼。

!DOCTYPE HTML

html

headtitlecanvas/titlemeta charset="utf-8" //head

body

canvas id="canvas" width="600"height="400" style="border:1px solid black"

pYour browserdoes not support the canvas element!/p

/canvas

script type="text/javascript"

var canvas =document.getElementById("canvas");

var c =canvas.getContext("2d");

c.fillStyle = '#000000';

c.font = 'bold 16px verdana';

c.fillText("文字1",200,30);

c.save();

c.rotate(Math.PI/6);

c.fillText("文字2",200,30);

c.restore();

/script

/body

/html

HTML5翻頁(yè)效果文字特效怎么實(shí)現(xiàn)

首先是HTML代碼，非常簡(jiǎn)單，列出我們需要渲染的文字：

div?class="foo"

span?class="letter"?data-letter="A"A/span

span?class="letter"?data-letter="B"B/span

span?class="letter"?data-letter="C"C/span

span?class="letter"?data-letter="D"D/span

span?class="letter"?data-letter="E"E/span

span?class="letter"?data-letter="F"F/span

span?class="letter"?data-letter="G"G/span

span?class="letter"?data-letter="H"H/span

span?class="letter"?data-letter="I"I/span

span?class="letter"?data-letter="L"L/span

span?class="letter"?data-letter="M"M/span

span?class="letter"?data-letter="N"N/span

span?class="letter"?data-letter="O"O/span

span?class="letter"?data-letter="P"P/span

span?class="letter"?data-letter="Q"Q/span

span?class="letter"?data-letter="R"R/span

span?class="letter"?data-letter="S"S/span

span?class="letter"?data-letter="T"T/span

span?class="letter"?data-letter="U"U/span

span?class="letter"?data-letter="V"V/span

span?class="letter"?data-letter="Z"Z/span

/div

CSS3

.letter{

display:?inline-block;

font-weight:?900;

font-size:?8em;

margin:?0.2em;

position:?relative;

color:?#00B4F1;

transform-style:?preserve-3d;

perspective:?400;

z-index:?1;

}

這樣我們就讓這些字母安安靜靜的排列起來(lái)，并有了自己的背景顏色，等待強(qiáng)大的CSS3來(lái)渲染。

接下來(lái)我們要讓文字在鼠標(biāo)滑過(guò)的時(shí)候產(chǎn)生翻轉(zhuǎn)傾斜的動(dòng)畫。

.letter:before,?.letter:after{

position:absolute;

content:?attr(data-letter);

transform-origin:?top?left;

top:0;

left:0;

}

.letter,?.letter:before,?.letter:after{

transition:?all?0.3s?ease-in-out;

}

.letter:before{

color:?#fff;

text-shadow:

-1px?0px?1px?rgba(255,255,255,.8),

1px?0px?1px?rgba(0,0,0,.8);

z-index:?3;

transform:

rotateX(0deg)

rotateY(-15deg)

rotateZ(0deg);

}

.letter:after{

color:?rgba(0,0,0,.11);

z-index:2;

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(0deg)

rotateZ(0deg)

skew(0deg,1deg);

}

.letter:hover:before{

color:?#fafafa;

transform:

rotateX(0deg)

rotateY(-40deg)

rotateZ(0deg);

}

.letter:hover:after{

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(40deg)

rotateZ(0deg)

skew(0deg,22deg);

}

HTML 有沒有代碼可以實(shí)現(xiàn)網(wǎng)頁(yè)翻轉(zhuǎn)功能？

有，不過(guò)這個(gè)"時(shí)代"還需要等待，因?yàn)樗袨g覽器還沒有真正的支持，可以用的有ie9以上、Chrome以及Safari、火狐等支持html5的瀏覽器，一下是針對(duì)body對(duì)應(yīng)的代碼：

body{

-webkit-transform:?scaleX(-1);?/*webkit內(nèi)核的，比如chrome等*/

-moz-transform:scaleX(-1);/*火狐的*/

}

你可以試一試，瀏覽器需要完全支持，總有那么一天的事，還需等待。

HTML5 頁(yè)面翻轉(zhuǎn)效果 求大神

你這也許需要CSS3的3D屬性，甚至是WebGL…

參考一下吧：

HTML范例ie.microsoft.com/testdrive

開發(fā)者文檔msdn.microsoft.com/zh-cn/library/ie/hh673529.aspx

html5怎樣引入三維模型，創(chuàng)建360度旋轉(zhuǎn)瀏覽？

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)畫幀

cvs.width = 400;

cvs.height = 200;

teddy.src = 'xxx.jpg';

heart.src = 'yyy.jpg';

//開始渲染

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)到畫布中心

ctx.rotate(DEG2RAD * angle); // 旋轉(zhuǎn)畫布

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);

分享題目：html5翻轉(zhuǎn),html5旋轉(zhuǎn)效果代碼
網(wǎng)頁(yè)地址：http://vcdvsql.cn/article36/dsiejpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、標(biāo)簽優(yōu)化、網(wǎng)站策劃、虛擬主機(jī)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)