canvas
画布的流程写法:最简单的写法
1:需要在项目中创建canvas.并给与宽高
2:canvas是依赖于js的. 获取元素的时候一般情况下都是用原声JS 获取
3:获取元素 var canvas = document.getElementById('~~');
4:获取上下文对象 也就是画笔 var ctx = canvas.getContext('2d');
5:开始绘制 ctx.beginPath();
6:设定开始位置: ctx.moveTo(x,y);
7:设定结束位置: ctx.lineTo(x,y);
8:结束绘制 ctx.closePath();
9: 绘制生成: ctx.stroke();
canvas 设置线的宽度 颜色 线圆角
ctx.lineWidth = 10;
ctx.strokeStyle='red';
ctx.lineCap='round'; 而 lineCap 有三个属性 butt round square
在这里 如果没有结束绘制 closePath(); lineCap 他只管两点的圆, 而 lineJoin 他只管两点之间的圆.
canvas 画图形
ctx.fill(); 位置在第九步.
ctx.fillStyle = 'red ' ; 更改颜色
如果想设置图形 还想再加上边线 在结尾 添加 ctx.stroke();即可 样式也是可以设置.
绘制矩形图形
ctx.fillRect(x,y,w,h); x代表left, y代表 top, w代表宽 h代表高 然后 ctx.fill();调用即可 如果想添加样式需要在绘制前去添加一些样式
绘制矩形边框 ctx.strokeRect(x,y,w,h); 代表如上.
绘制圆形
ctx.arc(x,y,r,起始位置,结束位置,逆时针或者顺时针true or false); x代表left,y代表top,r代表半径, 起始位置圆都是默认为0,就算你把起始位置的元素这是为100, 圆的绘制也会从0开始计算. 结束位置为当前结束点. 顺时针和逆时针用 true和false 来标示.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.BeginPath();
ctx.arc(150,150,100,0,Math.PI *2, true);
ctx.closePath();
ctx.fill();
var canvas = document.getElementById('canvas');
绘制文字
ctx.fillText(文字,x,y,maxwidth); 文字设置为:文字对象,x代表left,y代表top. maxwidth:最大宽度
ctx.font='30px 宋体' 30px代表文字大小 宋体为设置字体样式.
ctx.textAlign=' ~~~'; 此属性设置当前文字的水平对齐方式 有 left/start center right/end
ctx.textBaseline = '~~'; 此属性设置设置当前文字的垂直对齐方式 top middle bottom
绘制图片
1:创建图片
var imgs = new Image();
2:图片加载
imgs.onload = function(){
ctx.drawImage(this,0,0,500,500);
}
imgs.src = 'img/1.jpg';
ctx.drawimage(img,sx,sy,sw,sh,dx,dy,dw,dh);
img:为当前图片对象也可为this, sx,为原图片的left,sy为原图片的top,sw为原图片的宽,sh为圆图片的高. dx为现当前的left, 而且在这里也特别说明,如果需要绘制图片,需要用到onload方能够加载到图片上.
动画制作
例:在画布中让一个矩形移动起来.
setintval(){function(){},16} 此方法嵌套函数来对当前的矩形框的left 和top进行移动即可. 而在进行移动的时候,你或许会需要用到 clearRect(x,y,w,h)这个属性哦. 此属性的功能为:删除指定位置的像素. 里面的x代表当前的left,y带表top, w代表宽,h代表高. 为何需要clearRect()呢? 因为我们在画布移动的时候,x和y轴绘画的时候他会在原点有遗留保存当前的绘画, 也就是相当于让你绘画了一个矩形,而他在移动的时候,上一次的位置他是不会消失的.所以,动画的制作起来, 基本是相当于我们画一次,删除一次,画一次,删除一次..........没有错,就是这么麻烦.
贝塞尔曲线
贝塞尔曲线,个人还真的不太好去解释他是干啥的. 但是他往往情况下代表的是当前动画的移动速度. 说白了. 你可以理解为他是控制加速度的一种图形曲线. 如果你想详细的去百度了解一下.
二次贝塞尔
方法:quadraticCurveTo(cpx,cpy,x,y);
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。
cpx:代表控制点的X坐标;
cpy:代表控制点的y坐标;
x:代表结束点的x坐标;
y:代表结束点的y坐标;
三次贝塞尔
方法:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
cp1x:第一个贝塞尔控制点的 x 坐标;
cp1y:第一个贝塞尔控制点的 y 坐标
cp2x:第二个贝塞尔控制点的 x 坐标
cp2y:第二个贝塞尔控制点的 y 坐标
x:结束点的 x 坐标
y:结束点的y坐标
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)
