前端之Canvas知识点罗列（代码）

//矩形的绘制
/*
ctx.moveTo(100,100)
ctx.lineTo(300,100)
ctx.lineTo(300,300)
ctx.lineTo(100,300)
ctx.lineTo(100,100)
ctx.stroke()
*/

//平行线
/*
ctx.moveTo(100,100)
ctx.lineTo(200,100)
ctx.stroke();
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.stroke();
/
//Z字绘制
/
ctx.moveTo(100,100)
ctx.lineTo(200,100)
ctx.lineTo(100,200)
ctx.lineTo(200,200)
ctx.stroke();
*/
//闭合路径

//绘制三角形

/*
ctx.moveTo(100,100)
ctx.lineTo(200,200)
ctx.lineTo(0,200)
ctx.lineTo(100,100)
ctx.stroke();
/
/
使用闭合路径的优点：可以完美绘制图形，不会因为线宽(ctx.lineWidth)影响图形的绘制
ctx.moveTo(100,100)
ctx.lineTo(200,200)
ctx.lineTo(0,200)
ctx.closePath();
ctx.stroke();
/
/
ctx.lineWidth = 20;
ctx.moveTo(100,100)
ctx.lineTo(200,200)
ctx.lineTo(0,200)
ctx.closePath();
ctx.stroke();
/
//ctx.fill() 填充闭合路径的
//ctx.fillSytle 设置填充闭合路径的css样式 ctx.fillStroke 设置闭合路径的描边方式
/
ctx.moveTo(100,100)
ctx.lineTo(200,100)
ctx.lineTo(200,200)
ctx.lineTo(100,200)
ctx.fillStyle = ‘red’ //属性名 而不是用函数调用
ctx.fill();
ctx.lineWidth = ‘20’
ctx.strokeStyle = ‘blue’
ctx.stroke();
/
//非零闭合原则
//1.想要填充环形区域，只需在绘制内环和外环的顺序相反，再调用ctx.fill方法就可以
//记录某个方向的路径权值为1，另一个方向权值为-1,任意引一条直线，当直线与路径相交的求和不为0，则填充该区域
/
ctx.moveTo(100,100)
ctx.lineTo(300,100)
ctx.lineTo(300,300)
ctx.lineTo(100,300)
ctx.closePath();
ctx.moveTo(150,150)
ctx.lineTo(150,250)
ctx.lineTo(250,250)
ctx.lineTo(250,150)
ctx.closePath();
ctx.fillStyle = ‘red’
ctx.fill()
/
//在调用stroke方法和fill方法时，会往上回溯直到找到路径
//需要用beginPath方法声明开启了新的路径,否则会一直往上绘制
//画三条线:
/
ctx.moveTo(100,100)
ctx.lineTo(200,100)
ctx.strokeStyle =‘red’
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200)
ctx.lineTo(200,200)
ctx.strokeStyle = ‘green’
ctx.linewidth = 20
ctx.stroke()
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(200,300);
ctx.linewidth = 30
ctx.strokeStyle=‘blue’
ctx.stroke()
/
//通过循环，绘制多条线，组成彩色平面
/
for(let i=0;i<200;i++){
ctx.beginPath()
ctx.moveTo(100+i,100)
ctx.lineTo(100+i,102)
ctx.strokeStyle=‘hsla(’+ i +’,100%,50%,1)’
//Note : hala是干嘛的
ctx.stroke();
}
/
//绘制网格
//绘制一个50X50的网格：
//每条横线距离是10，每条纵线距离也是10
/
获取canvas标签中的属性值的方法:通过Dom得到元素，操作：结点.属性即可
for(let i=0;i<=500;i+=20){
ctx.beginPath()
ctx.moveTo(i,0)
ctx.lineTo(i,500)
ctx.stroke()
ctx.beginPath()
ctx.moveTo(0,i)
ctx.lineTo(500,i)
ctx.stroke()
}
/
/
//折线图
//绘制平面坐标系
var size = 20;
ctx.beginPath()
ctx.moveTo(size,size)
ctx.lineTo(size,cs.height-size)
ctx.lineTo(cs.width-size,cs.height-size)
ctx.strokeStyle = ‘blue’
ctx.stroke()
//绘制小三角形
ctx.beginPath()
ctx.moveTo(cs.width-size+10,cs.height-size)
ctx.lineTo(cs.width-size-5,cs.height-size-5)
ctx.lineTo(cs.width-size,cs.height-size)
ctx.lineTo(cs.width-size-5,cs.height-size+5)
ctx.closePath()
ctx.fillStyle = ‘red’
ctx.fill()
//绘制小三角形
ctx.beginPath()
ctx.moveTo(size,size)
ctx.lineTo(size+5,size+5)
ctx.lineTo(size,size-10)
ctx.lineTo(size-5,size+5)
ctx.closePath()
ctx.fillStyle = ‘red’
ctx.fill()
//将系统默认坐标轴转换成自带的坐标轴 方法:moveTo(a,b)
//其中a=x+size,b=height-size-y
//用自己画的坐标轴，绘制折线图
let pointArr = [{x:20,y:20},
{x:70,y:30},
{x:120,y:60},
{x:170,y:60},
{x:220,y:120},
{x:280,y:120},
{x:340,y:250},
{x:400,y:250},
]
ctx.beginPath()
ctx.moveTo(size,cs.height-size)
for(let i=0;i<pointArr.length;i++){
ctx.lineTo(size+pointArr[i].x,cs.height-size-pointArr[i].y)
}
ctx.stroke()
/
/
//绘制虚线的方法：ctx.setLineDash() Dash中应填入一个数组[]，该方法将依据数组内的值依次设置实线，空白的距离
//ctx.getLineDash()将返回设置虚线的数组，用途较少
ctx.beginPath()
ctx.moveTo(100,100)
ctx.lineWidth = ‘10’
ctx.setLineDash([10,10])
ctx.lineTo(200,100)
ctx.stroke();
/
//Canvas中与矩形相关的方法
//绘制矩形的四个方法
//methods one: rect(x,y,w,h)
/
ctx.rect(25,25,300,300)
ctx.stroke()
*/
//methods two: strokeRect(x,y,w,h)
// ctx.strokeRect(25,25,100,100)
//methods three: fillRect(x,y,w,h)
// ctx.fillRect(150,150,100,100)
//methods four: clearRect(x,y,w,h) 该方法可以用来清空画布
// ctx.clearRect(0,0,cs.width,cs.height)

//绘制移动的矩形：
//思考：如何能够让矩形在碰到边框时就反弹？且添加一个加速度，到达一定速度就停止加速
var x = 50;
var y = 200;
var stepX = 1;
var stepY = 1;
var dx = 1;
var dy = 1;
var w = 100
var h = 100
let interVal = setInterval(function(){
ctx.clearRect(0,0,cs.width,cs.height)
ctx.beginPath()
if(y+h>=cs.height){
dy = -1;
}
if(x+w>=cs.width){
dx = -1;
}
if(y<=0){
dy = 1;
}
if(x<=0){
dx = 1;
}
if(stepX<=5){
stepX++;
}
if(stepY<=5){
stepY++;
}
x += stepXdx;
y += stepYdy;
ctx.strokeRect(x,y,w,h)
},100)