1.canvas绘制
步骤
- 添加canvas元素,定义id和范围
- js里获取canvas元素
- 通过getContext()方法获取2D绘制环境
- 通过不同的函数进行图形绘制
坐标定位
- 绘制的图形定位都是以canvas的左上角为(0,0)原点
绘制直线
- moveTo(): 规定起始点
- lineTo(): 从起点绘制到规定坐标的直线
- stroke(): 实现绘制直线的功能
- fill(): 实现填充功能
实例:绘制一个三角形
html代码
js代码
绘制矩形
- fillStyle():设置矩形填充颜色。
- fillRect(x,y,width,height)。
- strokeStyle():设置矩形轮廓颜色。
- strokeRect(x,y,width,height)。
绘制圆形(弧形)
- beginPath():开始绘制路线
- arc(x,y,radius,startAngle,endAngle,anticlockwise)
设置绘制的中心点,半径,起始角度,结束角度和绘制方向。
贝塞尔曲线
二次贝塞尔曲线
- quadraticCurveTo(cp1x,cp1y,x,y)
cp1x,cp1y 表示一个控制点坐标;x,y代表终点坐标。
三次贝塞尔曲线
- bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x,cp1y和cp2x,cp2y分别代表
两个控制点。
实例1:绘制一个五角星
实例2:绘制宝马标志
2.CSS3 阴影 box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 必需。水平阴影的位置。允许负值。
- v-shadow 必需。垂直阴影的位置。允许负值。
- blur 可选。模糊距离。
- spread 可选。阴影的尺寸。
- color 可选。阴影的颜色。请参阅 CSS 颜色值。
- inset 可选。将外部阴影 (outset) 改为内部阴影。
**transform: none |
transform-functions;** |
-
transform:rotate(): 旋转,deg是度的意思
transform: rotate(-10deg);
-
transform:skew(): 倾斜
-
transform:scale(): 缩放,x方向2倍,y方向1.5倍
transform: scale(2, 1.5);
-
transform:translate(): 平移,x方向平移120px,y方向平移10px
transform:translate(120px,10px);
4.CSS3 transtion属性
transition: property duration timing-function delay;
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。