很方便(定义一个数组来存取小圆对象,最后一次性调用render方法绘制)
var canvas = document.getElementById(“canvas”);
canvas.width=300;
canvas.height=300;
var ctx = canvas.getContext(“2d”);
var renderArr=[];
var ball,color ;
for(var i=0;i<10;i++){
color = ‘#’ + Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色
ball = new Ball({
x:getRandom(40,260),//圆心X坐标
y:getRandom(40,260),//圆心X坐标
r:30,//半径
startAngle:0,//开始角度
endAngle:2*Math.PI,//结束角度
fill:true,//是否填充
fillStyle:color//填充的样式
});
renderArr.push(ball);//ball对象push到数组中
}
//循环数组,一次性绘制
renderArr.forEach(function(item){
item.render(ctx);//绘制
})
效果如图
做动画也很方便
比如(简单做个随机运动,要做定向运动其实也是一样的道理)
function reDraw(){
ctx.clearRect(0,0,300,300);//清理画布
//循环数组,一次性绘制
renderArr.forEach(function(item){
item.x=getRandom(40,260);//重新设置x
item.y=getRandom(40,260);//重新设置y
item.render(ctx);//绘制
})
}
setInterval(reDraw,200);
效果如下
接下来要做其他的东西都可以通过类似这样的方式了,很方便
绘制方形
构造函数
function Rect(o){
this.x=0,//x坐标
this.y=0,//y坐标
this.width=100,//宽
this.height=40,//高
this.thin=true,//线段薄一点
this.init(o);
}
Rect.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
Rect.prototype.render=function(context){
this.ctx=context;
innerRender(this);
function innerRender(obj){
var ctx=obj.ctx;
ctx.save()
ctx.beginPath();
ctx.translate(obj.x,obj.y);
if(obj.lineWidth){
ctx.lineWidth=obj.lineWidth;
}
if(obj.thin){
ctx.translate(0.5,0.5);
}
ctx.rect(0,0,obj.width,obj.height);
if(obj.fill){//是否填充
obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
ctx.fill();
}
if(obj.stroke){//是否描边
obj.strokeStyle?(ctx.strokeStyle=obj.strokeStyle):null;
ctx.stroke();
}
ctx.restore();
}
return this;
}
调用示例
var canvas = document.getElementById(“canvas”);
canvas.width=300;
canvas.height=300;
var ctx = canvas.getContext(“2d”);
var slider = new Rect({
x:40,
y:40,
width:200,
height:200,
fill:true,
fillStyle:‘pink’
})
slider.render(ctx);
效果
绘制线段
构造函数
//直线的构造
function Line(ctx,o){
this.x=0,//x坐标
this.y=0,//y坐标
this.startX=0,//开始点x位置
this.startY=0, //开始点y位置
this.endX=0,//结束点x位置
this.endY=0;//结束点y位置
this.thin=false;//设置变细系数
this.ctx=ctx;
this.init(o);
}
Line.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
Line.prototype.render=function(){
innerRender(this);
function innerRender(obj){
var ctx=obj.ctx;
ctx.save()
ctx.beginPath();
ctx.translate(obj.x,obj.y);
if(obj.thin){
ctx.translate(0.5,0.5);
}
if(obj.lineWidth){//设定线宽
ctx.lineWidth=obj.lineWidth;
}
if(obj.strokeStyle){
ctx.strokeStyle=obj.strokeStyle;
}
//划线
ctx.moveTo(obj.startX, obj.startY);
ctx.lineTo(obj.endX, obj.endY);
ctx.stroke();
ctx.restore();
}
return this;
}
调用实例
var canvas = document.getElementById(“canvas”);
canvas.width=300;
canvas.height=300;
var ctx = canvas.getContext(“2d”);
var line = new Line(ctx,{
x:0,
y:0,
startX:10,
startY:10,
endX:200,
endY:200,
thin:true,
strokeStyle:‘orange’
})
line.render();
效果
绘制图片
构造函数
var canvas = document.getElementById(“canvas”);
canvas.width=300;
canvas.height=300;
var ctx = canvas.getContext(“2d”);
//图片对象ImageDraw构造函数
function ImageDraw(o){
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,//图片目标显示宽度(宽度不缩放时不必填)
总结
前端资料汇总
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
-
算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!