香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！(1)

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

right:10px;

cursor:pointer;

}

#right:hover{

-webkit-box-shadow: #ccc 10px 10px 10px;

-moz-box-shadow: #ccc 10px 10px 10px;

box-shadow: #ccc 10px 10px 10px;

}

var slide= new SlideShow();

//初始化

SlideShow.prototype.init=function(el,left,right){

if(!el) return ;

this.el=el;

var canvas = document.createElement(‘canvas’);//创建画布

canvas.style.cssText=“border:1px solid grey;border-radius:10px;”;//设置样式

var W = canvas.width = 640; //设置宽度

var H = canvas.height = 360;//设置高度

el.appendChild(canvas);//添加到指定的dom对象中

}

效果

图片构造函数

//图片对象ImageDraw构造函数

function ImageDraw(o,obj){

this.id=‘’,

this.image=0,//图片对象（必填）

this.sx=0,//图片切片开始x位置（显示整个图片的时候不需要填）

this.sy=0,//图片切片开始y位置（显示整个图片的时候不需要填）

this.sWidth=0, //图片切片开始宽度（显示整个图片的时候不需要填）

this.sHeight=0,//图片切片开始高度（显示整个图片的时候不需要填）

this.dx=0, //图片目标x位置（必填）

this.dy=0, //图片目标y位置（必填）

this.dWidth=0,//图片目标显示宽度（宽度不缩放时不必填）

this.dHeight=0//图片目标高度高度（高度不缩放时不必填）

this.init(o,obj);

}

ImageDraw.prototype.init=function(o,obj){

this.lol=obj;

for(var key in o){

this[key]=o[key];

}

return this;

}

ImageDraw.prototype.render=function(context){

draw(context,this);

function draw(context,obj) {

var ctx=context;

ctx.save();

if(!obj.image || getType(obj.dx)‘undefined’ || getType(obj.dy)‘undefined’){

throw new Error(“绘制图片缺失参数”);

return;

}

ctx.translate(obj.dx,obj.dy);

if(!getType(obj.sx)‘undefined’ && getType(obj.sy)‘undefined’ && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){

//裁剪图片，显示时候有缩放

ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);

}else if(obj.dWidth && obj.dHeight){

ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight);//原始图片，显示时候有缩放

}else{

ctx.drawImage(obj.image,0, 0);//原始图片，显示时候无缩放

}

ctx.restore();

}

}

图片路径

//组装图片路径

SlideShow.prototype.loadUrl=function(){

for(var i=1;i<=this.count;i++){

this.urlObj[i]=“images/”+i+“.jpeg”;

}

}

装载图片

//加载图片

SlideShow.prototype.loadImg=function(fn){

var that=this;

var keys = Object.keys(this.urlObj);

var url,key;

var n=0;

for(var i=0;i<keys.length;i++)

{

key=keys[i];

url = this.urlObj[keys[i]];

var img=new Image();

img.src=url;

(function(k,obj){

obj.οnlοad=function(){

that.imgObj[k]=obj;

n++;

if(n===keys.length){

fn();

}

}

})(key,img)

}

}

组装图片对象

//组装图片对象信息

SlideShow.prototype.drawImg=function(){

var that=this;

var ctx=this.ctx;

var imgObj = this.imgObj;

var keys = Object.keys(imgObj);

var x=y=0;

var img ,image;

keys.forEach(function(key){

image=imgObj[key];

switch (key){//这可以不用switch,这样写是为了预留其他图片的时候做其他判断用的

default :

img = new ImageDraw({image:image, dx:x, dy:y ,dWidth:this.w,dHeight:this.h},that);

break;

}

that.imageArr.push(img);

})

this.renderArr[0]=undefined;//先第一个位置占用，用来放图片

this.tranImg();//切换图片

}

//切换图片

SlideShow.prototype.tranImg=function(){

this.renderArr[0]=this.imageArr[this.imageIndex];//根据imageIndex来切换

}

调用render绘制图片

//渲染图形

SlideShow.prototype.render=function(){

var context=this.ctx;

this.clearCanvas();

_.each(this.renderArr,function(item){

item && item.render(context);

});

}

效果

加入指示点

小圆的构造函数

//构造函数

function Ball(o){

this.x=0,//圆心X坐标

this.y=0,//圆心Y坐标

this.r=0,//半径

this.startAngle=0,//开始角度

this.endAngle=0,//结束角度

this.anticlockwise=false;//顺时针，逆时针方向指定

this.stroke=false;//是否描边

this.fill=false;//是否填充

this.scaleX=1;//缩放X比例

this.scaleY=1;//缩放Y比例

this.id=0;//设置一个id

this.init(o);

}

//初始化

Ball.prototype.init=function(o){

for(var key in o){

this[key]=o[key];

}

}

//是否在当前图形内

Ball.prototype.isPoint=function(offset){

var offsetX =offset.x ,

offsetY =offset.y ;

//用勾股定理计算鼠标与圆心的距离

var rDis = Math.sqrt((offsetX-this.x)**2+(offsetY-this.y)**2);

if(rDis<=this.r){

return true;

}

return false;

}

//绘制

Ball.prototype.render=function(context){

var ctx=context;

ctx.save();

ctx.beginPath();

ctx.translate(this.x,this.y);

ctx.scale(this.scaleX,this.scaleY);//设定缩放

ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆

if(this.lineWidth){//线宽

ctx.lineWidth=this.lineWidth;

}

if(this.fill){//是否填充

this.fillStyle?(ctx.fillStyle=this.fillStyle):null;

ctx.fill();

}

if(this.stroke){//是否描边

this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;

ctx.stroke();

}

ctx.restore();

return this;

}

根据图片数量来创建指示点个数

//创建指示点

SlideShow.prototype.createPoints=function(){

var x=0,y=0;

var p,color=‘grey’;

for(var i=0;i<this.count;i++){

p = new Ball({

x:i20+this.w/2-this.count/218,

y:this.h-20,

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

创建指示点个数

//创建指示点

SlideShow.prototype.createPoints=function(){

var x=0,y=0;

var p,color=‘grey’;

for(var i=0;i<this.count;i++){

p = new Ball({

x:i20+this.w/2-this.count/218,

y:this.h-20,

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】