# 3dcssProjectTest
**Repository Path**: javafdx/3dcss-project-test
## Basic Information
- **Project Name**: 3dcssProjectTest
- **Description**: canvas svg测试
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-25
- **Last Updated**: 2023-08-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## css3动画性能优化
### 1. 创建一个新的渲染层（减少回流）
*有明确的定位属性（relative, fixed, sticky,absolute）
*透明度（opacity小于1）
*有css transform属性（不为none）
*当前有对于opacity,transform,fliter,backdrop-filter应用动画
*backface-visbility属性为hidden
### 2.创建合成层，合成层会开始GPU加速页面渲染，但不能滥用
*对opacity,transform,fliter,backdropfilter 应用了animation或者
transition(需要active的animation或者transition)
*有3d transform函数（比如translate3d,translateZ,scale3d,rotate3d）
*will-change设置为opacity,transform,top,left.bottom,right,比如：will-change:opacity,transform;
其中top，left等需要设置明确的定位属性，如relative等
### 绘制矩形
矩形方法和路径方法；
路径（是点列表，由线段连接），除了矩形，其他的图形都是通过一条或者多条路径组合而成的；
#### 1.Canvas绘图的矩形方法；
#### 2.绘制路径步骤:
1.首先需要创建路径起始点(beginPath)
2.然后使用绘图命令去画出路径(arc,lineTo)
3.之后把路径闭合(closePath,不是必须)
4.一旦路径生成，就能通过描边（stroke）或者填充路径区域(fill)来渲染图形；
-----------------------------------------
beginPath()：新建一条路径，生成之后，图形绘制命令被指向到新的路径上绘图，不会关联到旧的路径；
closePath(): 闭合路径之后图形绘制命令又重新指向到beginPath之前的上下文中;
stroke():通过线条来绘制图形描边(针对当前路径图形)
moveTo(x,y): 移步到起点;
lineTo(x,y): 直线结束的点；
#### 3. 路径绘制圆弧
1. arc(x, y, radius, startAngle, endAngle, anticlockwise);
2. 弧度，是平面角的单位，1单位弧度为：圆弧长度等于半径时的圆心角，
而一个完整的园的弧度是Math.PI*2
3. 角度和弧度的关系
角度与弧度的js表达式：
弧度=(Math.PI/180)*角度，即 1角度 = Math.PI/180 个弧度；相当于360度等于2*Math.PI
#### 4.绘制矩形
rect(x, y, width, height)
#### 5. 颜色(默认黑色 #000000)
注意：是属性，不是方法；
描边颜色： strokeStyle = color;
填充颜色： fillStyle = color;
#### 6. 线性 Line styles
lineWidth = value 设置线条宽度
lineCap = value 设置线条末端样式
---------------------
截断 butt 默认butt
圆形 round
正方形 square
--------------------
lineJoin = type 设定线条与线条间结合处的样式
(
round 圆形
bevel 斜角
miter 斜槽规 默认miter
)
解决1像素问题：如，1px的线条会在路径两边各延伸半像素，那么应该从(3.5,1) 到(3.5, 5)
其边缘正好落在像素边界，填充出来就是准确的宽为1.0的线条；
#### 7. 绘制文本
1. fillText(text, x, y [,maxWidth])
在(x,y)位置，填充指定的文本
绘制的最大宽度（可选）
2. strokeText(text, x, y [, maxWidth])
文本的样式
font = value; 当前绘制文本的样式，和css font 属性相同的语法，默认字体是： 10px sans-serif;
textAlign = value: 文本对齐方式，可选 start,end,left,right, center 默认start;
textBaseline = value 基线对齐 top,hanging,middle,alphabetic, ideographic, bottom;
#### 8. 绘制图片
drawImage(image, x, y, width, height);
xy起始坐标；width/height缩放大小；
图片来源：
HTMLImageElement: 这些图片是由image()函数构造出来的，或者任何的![]()
元素；
HTMLVideoElement: 用一个HTML的