项目地址

使用CSS3创建简单的3D场景

创建场景

rotate(旋转)、skew(扭曲)、scale(缩放)、translate(移动)

perspective；perspective-origin

transform：

translate平移 rotate旋转

translateX(x px) retateX(x deg)

[transform-style:preserve-3d]意思是transform操作是对3D进行的

transfom-origin 调整旋转中心

x轴left center right

y轴 top center bottom

z轴 length px

transition: <过渡属性名称><过渡时间><过渡模式>

-weebkit-transition Safari、chrome

-moz-transition Firefox

-o-transition Opera

过渡模式:

​ ease 缓慢开始缓慢结束

​ linear 匀速

​ ease-in 缓慢开始

​ ease-out 缓慢结束

​ ease-in-out

颜色变色1s：

-weebkit-transition: color 1s

Draw

context.moveTo(x,y) 一个点

context.lineTo(x,y) 画线

context.lineWidth 线条宽度

context.strokeStyle 线条颜色

context.fillStyle 填充颜色

context.stroke() 绘制线条

context.fill() 绘制填色块

context.beginPath() 开始绘制一段

context.closePath 结束

Draw an arc

context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)

参数分别对应圆心x、y值、半径、开始弧度、结束弧度、顺/逆时针

其中无论顺/逆时针，0.5π的位置不会变

Animation

setInterval(

function(){

render()

uppdate()

},50)

context.clearRect (x,y,width,height)

对空间内的矩形图像刷新

context.canvas

找到上下文对应的画布

赏

谢谢你的关注

支付宝

微信