正文
html5翻转,html5旋转效果代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
请帮忙看看 html5 canvas 如何做到文字旋转？我的
首先：save是保存当前状态，restore是返回上一次保存的状态。
你画出"文字1"，后旋转，后返回（相当于没有旋转），最后才画"文字2"，所以两次文字都不旋转。
其次：rotate()的参数不是角度制，而是弧度制（Maht.PI相当于180度）。
所以要旋转30角度必须这样写c.rotate(Math.PI/6);
再次：旋转之后的方向都发生了改变。
就是说如果你先在x=200,y=200的地方画了东西，然后旋转30度，然后在x=200,y=200的地方画了另一个东西，这两个东西将不在同一个地方。（可以想象画画得人绕着坐标原点旋转了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
相关问答
Q1: HTML5翻页效果文字特效怎么实现
首先是HTML代码，非常简单，列出我们需要渲染的文字：
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;
}
这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的CSS3来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。
.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);
}
Q2: HTML 有没有代码可以实现网页翻转功能？
有，不过这个"时代"还需要等待，因为所有浏览器还没有真正的支持，可以用的有ie9以上、Chrome以及Safari、火狐等支持html5的浏览器，一下是针对body对应的代码：
body{
-webkit-transform: scaleX(-1); /*webkit内核的，比如chrome等*/
-moz-transform:scaleX(-1);/*火狐的*/
}
你可以试一试，浏览器需要完全支持，总有那么一天的事，还需等待。
Q3: HTML5 页面翻转效果 求大神
你这也许需要CSS3的3D属性，甚至是WebGL…
参考一下吧：
HTML范例ie.microsoft.com/testdrive
开发者文档msdn.microsoft.com/zh-cn/library/ie/hh673529.aspx
Q4: html5怎样引入三维模型，创建360度旋转浏览？
html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的。
比如可以用以下方法实现图片的360度旋转：
代码示例：
var render, loop, t, dt, //定义变量
DEG2RAD = Math.PI / 180, //角度转弧度
cvs = document.querySelector('canvas'), //创建canvas
ctx = cvs.getContext('2d'),//绘制2d图形上下文
teddy = new Image(), //创建图像
heart = new Image(), //创建图像中心
angle = 0,//初始化角度为0
reqAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
//创建动画帧
cvs.width = 400;
cvs.height = 200;
teddy.src = 'xxx.jpg';
heart.src = 'yyy.jpg';
//开始渲染
render = function (timestamp) {
dt = timestamp - t;
t = timestamp;
// cavas设置为白色
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); // 移动鼠标到画布中心
ctx.rotate(DEG2RAD * angle); // 旋转画布
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);
