js 动画
计时器精度低:4ms-15ms,异步执行不确定
动画开始 requestAnimationFrame(function)
结束 cancelAnimationFrame()
canvas 介绍
<canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单的动画,甚至可以进行实时视频处理和渲染。<canvas> 只有两个可选的属性 width、heigth(默认 width 为 300、height 为 150,单位 px) 属性,浏览器不支持时用内容替换。
也可以使用 css 属性来设置宽高,但是如宽高属性和初始比例不一致,会出现扭曲。建议永远不要使用 css 属性来设置 <canvas> 的宽高
绘制矩形
<canvas> 只支持一种原生的图形绘制:矩形。所有其他图形都至少需要生成一种路径 (path)。
var canvas=document.querySelector('canvas');
var x=canvas.getContext("2d");//渲染2d图形
x.fillRect(x0,y0,width,height);//填充矩形
//矩形 x 坐标、矩形 y 坐标、矩形宽度和矩形高度
x.fillStyle="rgb()";//填充颜色
x.strokeRect(x0,y0,width,height) //边框矩形
x.strokeStyle="rgb()" //边框颜色
x.clearRect(x,y,width,height) //擦除指定区域
toDataURL()导出canvas图像
状态保存和恢复
save() :Canvas 状态存储在栈中,每当 save()方法被调用后,当前的状态就被推送到栈中保存 restore():每一次调用 restore 方法,上一个保存的状态就从栈中弹出,所有设定都恢复(类似数组的 pop())
绘制路径
图形的基本元素是路径,是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
var canvas=document.querySelector('canvas');
var x=canvas.getContext("2d");//渲染2d图形
x.beginPath(); //开始绘制
x.arc(x, y, radius, startAngle, endAngle, counterclockwise)//x,y圆心坐标,radius半径,起始角度,结束角度,counterclockwise 是布尔值,true 表示逆时针,false 表示顺时针(默认是顺时针)
x.moveTo(x,y);//不绘制线条,只把绘制光标移动到(x, y)
arcTo(x1, y1, x2, y2, radius) //以给定半径 radius,经由(x1, y1)绘制一条从上一点
到(x2, y2)的弧线
x.lineTo(x,y);//绘制一条从上一点到(x, y)的直线
bezierCurveTo(c1x, c1y, c2x, c2y, x, y):以(c1x, c1y)和(c2x, c2y)为控制点,
绘制一条从上一点到(x, y)的弧线（三次贝塞尔曲线）
quadraticCurveTo(cx, cy, x, y):以(cx, cy)为控制点,绘制一条从上一点到(x, y)
的弧线（二次贝塞尔曲线）
rect(x, y, width, height):以给定宽度和高度在坐标点(x, y)绘制一个矩形。这个方法
与 strokeRect()和 fillRect()的区别在于,它创建的是一条路径,而不是独立的图形
x.colsePath();//绘制返回起点的线
x.stroke();//绘制路径
x.fill();//会自动闭合路径
绘制文本
fillText(string,x,y,maxPX)
strokeText(string,x,y,maxPX)
measureText(string)返回TextMetrics,对象width属性返回字符串总宽度
绘制结果取决于以下属性
font:以 CSS 语法指定的字体样式、大小、字体族等,比如"10px Arial"。
textAlign:指定文本的对齐方式,可能的值包括"start"、"end"、"left"、"right"和
"center"。推荐使用"start"和"end",不使用"left"和"right",因为前者无论在从左到右
书写的语言还是从右到左书写的语言中含义都更明确。
textBaseLine :指定文本的基线,可能的值包括 "top" 、 "hanging" 、 "middle" 、
"alphabetic"、"ideographic"和"bottom"
变换
rotate(angle):围绕原点把图像旋转 angle 弧度。
scale(scaleX, scaleY):通过在 x 轴乘以 scaleX、在 y 轴乘以 scaleY 来缩放图像。scaleX
和 scaleY 的默认值都是 1.0。
translate(x, y):把原点移动到(x, y)。执行这个操作后,坐标(0, 0)就会变成(x, y)。
transform(m1_1, m1_2, m2_1, m2_2, dx, dy):像下面这样通过矩阵乘法直接修改矩阵。
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):把矩阵重置为默认值,再以传入的
参数调用 transform()。
绘制图片
x.drawImage(img,x,y,width,height); //绘制图片
截取源图
drawImage(image, iamge_sx, image_sy, image_Width, image_Height, show_left,show_top, show_dWidth, show_dHeight)
iamge_代表图像源,show_图像显示
createPattern(img,repeat) 第二个参数"repeat"、"repeat-x"、"repeat-y"和"no-repeat"
let imageData = x.getImageData(x,y,width,height);
imageData包含 3 个属性:width、height、data data元素分别代表rgba
createImageData()
阴影
shadowColor:CSS 颜色值,表示要绘制的阴影颜色,默认为黑色。
shadowOffsetX:阴影相对于形状或路径的 x 坐标的偏移量,默认为 0。
shadowOffsetY:阴影相对于形状或路径的 y 坐标的偏移量,默认为 0。
shadowBlur:像素,表示阴影的模糊量。默认值为 0,表示不模糊。
渐变
let gradient =createLinearGradient()起点 x 坐标、起点 y 坐标、终点 x 坐标和终点 y 坐标
gradient.addColorStop(0,rgb) 0初始颜色,1最终渐变颜色
gradient.addColorStop(1,rgb)
合成
globalAlpha 指定绘制内容的透明度,默认为0(0-1)
globalCompositeOperation = type新绘制的图形与原有图形融合方式
source-over:默认值,新图形绘制在原有图形上面。
source-in:新图形只绘制出与原有图形重叠的部分,画布上其余部分全部透明。
source-out:新图形只绘制出不与原有图形重叠的部分,画布上其余部分全部透明。
source-atop:新图形只绘制出与原有图形重叠的部分,原有图形不受影响。
destination-over:新图形绘制在原有图形下面,重叠部分只有原图形透明像素下的部分可见。
destination-in:新图形绘制在原有图形下面,画布上只剩下二者重叠的部分,其余部分完全
透明。
destination-out:新图形与原有图形重叠的部分完全透明,原图形其余部分不受影响。
destination-atop:新图形绘制在原有图形下面,原有图形与新图形不重叠的部分完全透明。
lighter:新图形与原有图形重叠部分的像素值相加,使该部分变亮。
copy:新图形将擦除并完全取代原有图形。
xor:新图形与原有图形重叠部分的像素执行“异或”计算。
3D 渲染-WebGL
canva.getContext('3d');
// 显示图片
let image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);