Use canvas in vue to draw simple line animation effects;
problems: 1. There is no logical judgment that the X-axis or Y-axis does not change; 2. I can’t draw arcs, and I don’t know how to draw a single pixel with an arc.
The method is defined in method:
getCanvas(start,end){
return new Promise(resolve=>{
let movingDistance_x = end.x - start.x; //x轴需要移动的距离
let movingDistance_y = end.y - start.y; //y轴需要移动的距离
let ratio = movingDistance_y / movingDistance_x; // 斜率
// 画线的方法
let draw_lineTo = (start_draw,end_draw)=>{
this.ctx.beginPath()
this.ctx.lineCap="round";
this.ctx.lineJoin="round";
this.ctx.miterLimit=1;
this.ctx.moveTo(start_draw.x,start_draw.y)
this.ctx.lineTo(end_draw.x,end_draw.y)
this.ctx.lineWidth = 4
this.ctx.strokeStyle = 'rgb(32,83,131)'
this.ctx.stroke()
if(Math.abs(end_draw.x - end.x) == 0 ){
resolve()
return
}
start_position = end_draw
end_position = getEnd_position(start_position)
console.log(Math.abs(end_draw.x - end.x),start_position,end_position)
setTimeout(() => {
draw_lineTo(start_position,end_position)
}, 10);
}
// 获取开始坐标
let start_position = {
x : start.x, y : start.y}
// 获取结束坐标的方法
let getEnd_position = (start_position)=>{
let x = end.x > start.x ? (start_position.x + 1) : (start_position.x - 1)
let y =
end.x > start.x
? start_position.y + ratio
: start_position.y - ratio;
return {
x : x , y : y }
}
// 获取结束坐标
let end_position = getEnd_position(start_position)
// 画线
draw_lineTo(start_position,end_position)
})
}
called in mounted
this.ctx = this.$refs.myCanvas.getContext('2d')
this.$nextTick(()=>{
(async () =>{
await this.getCanvas({
x:706,y:402},{
x:660,y:375})
await this.getCanvas({
x:598,y:374},{
x:534,y:410})
await this.getCanvas({
x:534,y:410},{
x:468,y:374})
// 分叉
this.getCanvas({
x:468,y:374},{
x:554,y:321})
.then(()=>{
this.getCanvas({
x:554,y:321},{
x:518,y:296})
})
await this.getCanvas({
x:468,y:374},{
x:241,y:503})
await this.getCanvas({
x:241,y:503},{
x:23,y:377})
this.getCanvas({
x:23,y:377},{
x:62,y:352})
})()
})