Canvas部分知识总结

Canvas笔记总结！！
接前部分~

canvas是什么?

是一个 HTML5 标签,该标签用来绘图

canvas怎么用

canvas 是一个画布,不能自己画图,画图需要绘图上下文

var cas = document.querySelector("#c");
//获取绘图上下文
car ctx = cas.getContext("2d");

画直线

//设置直线的起点
ctx.moveTo(x,y);
//画路径到直线的终点
ctx.lineTo(x,y);

开启新路径

ctx.befinPath();

画曲线

//使用for循环,用函数来帮一个y确定一个x
//然后讲x,y的每一个点用lingTo连起来就变成了一条曲线

画矩形

//1. 手动,纯人工
//2. ctx.rect(x,y,w,h);
//3. ctx.strokeRect(x,y,w,h);
//4. ctx.fillRect(x,y,w,h);

画弧

ctx.arc(x,y,r,startAngle.endAngle[,Boolean optional anticlockwise])

扇形

//先moveTo到原心
moveTo(x,y);
ctx.arc(x,y,r,startAngle.endAngle[,Boolean optional anticlockwise])
ctx.closePath();
ctx.fill();

饼图

3 等分的饼

开始的角度一般是 -90
每画一个扇形,就让角度 +120
再从加了 120 的角度画下一个扇形

动画饼图

定时器
每一段时间画一个小扇形,就和画饼一样

文字

fillText(str, x, y)
strokText(str, x, y)

对其方式

水平

left
center
right
start
end

垂直

top
middle
bottom
hanging
alphabetic
ideographic

完整饼图

先算所有数据的总和
算每个数据的比例,用比例算出角度
更具每个角度去画扇形
在去画扇形的中线
画文字下面的线
写文字

图片

//3参
ctx.drawImage(img, x, y)
//直接画不管宽高
//5参
ctx.drawImage(img, x, y, w, h)
//要确定宽高
//9参
ctx.drawImage(img, x, y, w, h, x1, y1, w1, h1)

//拿出图片中 x, y, w, h 这个矩形所在的位置的图像
//放到canvas中x1, y1, w1, h1这个矩形所在的位置

帧动画

变换

平移变换把画布的原点移动到指定的位置
ctx.translate(x, y)
缩放变换对画布进行缩放

ctx.scale(x, y)  //x表示的是对画布x轴的缩放，如果大于1 是放大 如果小于1 是缩小
ctx.scale(x, y)  //y表示的是对画布y轴的缩放，如果大于1 是放大 如果小于1 是缩小

旋转变换
ctx.rotate(弧度) //将画布，围绕原点旋转指定的弧度