最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。
这个例子,fillRect()方法绘制了一个100X100的黑色矩形(没有使用fillStyle设置填充色的话,默认的都是黑色的背景),它左上角的坐标为(25,25);接着,clearRect()方法在原先的基础上,清除了一个60×60的矩形,它左上角的坐标是(45,45);最后,利用strokeRect()方法,绘制了一个50×50大小的矩形边框,它左上角的坐标为(50,50)。
绘制路径
与绘制路径相关的函数有:
beginPath()
closePath()
stroke()
fill()
beginPath()丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为(0,0)。当一个画布的环境第一次创建时,beginPath()方法会被显示地调用。
closePath()创建从当前点到开始点的路径。
stroke()方法绘制当前路径的边框。它意味着画轮廓,但是线条的可视化取决于strokeStyle、lineWidth、lineJoin、lineCap和miterLimit等属性。
fill()方法用于填充路径,默认是黑色。fill()方法使用fillStyle属性所指定的颜色、渐变和模式来填充当前路径。当调用该方法时,开放的路径会自动闭合。
绘制路径需要经过下面四个步骤:
第一步:用beginPath创建一条路径。
第二步:实际绘制路径的部分。
第三步:调用closePath方法关闭路径。如果图形已闭合或者它只是一个点,那么这个方法将什么也不会做。这一步不是必须的
第四步:调用stroke或fill方法,绘制边框或者填充路径。
绘制路径示例:
function draw(){
var canvas=document.getElementById(‘testPath’);
if(canvas.getContext){
var cxt=canvas.getContext(‘2d’);
cxt.beginPath();
cxt.moveTo(75,50);
cxt.lineTo(100,75);
cxt.lineTo(100,25);
cxt.fill();
}
}
上面这个例子,绘制了一个三角形。首先,利用beginPath()方法创建一条路径;moveTo()方法将点移动到坐标(75,50)(moveTo()方法接下来就会讲到);lineTo()方法画了两条直线;最后调用fill()方法填充路径,调用了这个方法后,路径就自然闭合了,所以不必再调用closePath()方法来闭合路径。
moveTo()方法
上面的例子有用到moveTo()这个方法,这边就来说说moveTo()方法。语法如下:
moveTo(x,y)
moveTo()方法用于定位绘画的位置,即将点移动到参数x,y所指定的坐标位置。
canvas初始化或者调用了beginPath()方法时,绘画开始的位置即原点(0,0),使用moveTo()方法,我们可以将起始位置移动到任何我们想要的地方。
moveTo()的使用实例:
function draw(){
var canvas=document.getElementById(‘test_moveTo’);
if(canvas.getContext){
var cxt=canvas.getContext(‘2d’);
cxt.beginPath();
cxt.arc(75,75,50,0,Math.PI*2,true);
cxt.moveTo(100,75);
cxt.arc(75,75,35,0,Math.PI,false);
cxt.moveTo(65,65);
cxt.arc(60,65,5,0,Math.PI*2,true);
cxt.moveTo(95,65);
cxt.arc(90,65,5,0,Math.PI*2,true);
cxt.stroke();
}
}
绘制各种线条
用lineTo()方法来画直线。
lineTo()方法接受终点的坐标(x,y)作为参数。起始坐标取决于前一路径的终点坐标。当然,起始坐标也可以通过前面介绍的moveTo()方法来设置。
绘制线条示例:
function draw(){
var canvas=document.getElementById(‘test_lineTo’);
if(canvas.getContext){
var cxt=canvas.getContext(‘2d’);
cxt.beginPath();
cxt.moveTo(25,25);
cxt.lineTo(105,25);
cxt.lineTo(25,105);
cxt.fill(); //fill填充路径,会自动闭合路径。
cxt.beginPath();
cxt.moveTo(125,125);
cxt.lineTo(125,45);
cxt.lineTo(45,125);
cxt.closePath();
cxt.stroke(); //stroke不会闭合路径,所以再描边先要先闭合路径
}
}
上面的例子利用lineTo()方法绘制了两个三角形。从这个例子也可以看出fill和stroke的区别。
绘制弧线
用arc方法来绘制弧线或圆。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
该方法接受五个参数。其中,x,y是圆心坐标;radius是圆的半径;startAngle和endAngle分别是起末弧度(以x轴为基准);anticlockwise为true表示逆时针,反之为顺时针。
这边有一点是需要注意的,就是arc方法里的角度是以弧度为计算单位的,不是度。这么说吧,通常我们说的180度,就等价于PI。两者的计算公式是这样的:radians=(Math.PI/180)*degrees.(其中,radians代表弧度,degrees代表度)
绘制圆弧示例:
function draw(){
var canvas=document.getElementById(‘test_arc’);
if(canvas.getContext){
var ctx=canvas.getContext(‘2d’);
for(var i=0; i<4; i++){ //输出4行4列的矩阵
for(var j=0; j<4; j++){
ctx.beginPath();
var x=25+j*50; //圆心x坐标
var y=25+i*50; //圆心y坐标
var radius=20; //半径
var startAngle=0; //起始弧度
var endAngle=Math.PI/2+(Math.PI*j)/2; //结束弧度
var anticlockwise=i%2==0?false:true; //奇数行顺时针;偶数行逆时针。
ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise); //循环绘制圆/圆弧
if(i>1){
ctx.fill(); //3,4行填充图案
}else{
ctx.stroke(); //1,2行仅勾勒路径
}
}
}
}
}
上面这个例子,用双层循环输出了4*4的圆弧矩阵。
贝塞尔和二次方曲线
Vue
-
什么是MVVM?
-
mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
-
组件之间的传值?
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用?
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用?
-
Vue 的 nextTick 的原理是什么?
-
Vuex 有哪几种属性?