canvas

canvas动画思想

export class AppComponent implements OnInit{
  canvas
  ctx
  left=100
  ngOnInit(): void {
    this.canvas  = document.getElementById("canvas")
    this.ctx = this.canvas.getContext("2d")
    this.ctx.fillStyle = "blue"
    //this.ctx.fillRect(100,100,100,100)
   setInterval(()=>{
     this.ctx.clearRect(0,0,300,300)
     this.left++
     this.ctx.fillRect(this.left,100,100,100)
   },100)
    
    console.log(this.ctx)
  }
}

canvas 面向对象思想

export class AppComponent implements OnInit{
  canvas
  ctx
  ngOnInit(): void {
    //获取画布
    this.canvas  = document.getElementById("canvas")
    //获取上下文
    this.ctx = this.canvas.getContext("2d")
    //维护方法
    function Rect(x,y,w,h,color){
        this.x= x;
        this.y= y;
        this.w = w;
        this.h=h;
        this.color =color;
    }
    //更新方法，x坐标加1（改变图形位置）
    Rect.prototype.update = function(){
        this.x++;
    }
    //渲染方法
    Rect.prototype.render = function(){
      this.bind.ctx.fillStyle = "blue"
      this.bind.ctx.fillRect(100,100,50,50,);
    }
    var r1 = new Rect(100,100,50,50,"blue")
   setInterval(()=>{
     this.ctx.clearRect(0,0,this.canvas.whdth,this.canvas.height)
     r1.update()
     r1.render()
     
    //  console.log("hello")
   },1000)
    
    console.log(this.ctx)
  }
}

绘制矩形、直线

• 填充矩形

export class AppComponent implements OnInit{
  canvas
  ctx
  ngOnInit(): void {
    //获取画布
    this.canvas  = document.getElementById("canvas")
    //获取上下文
    this.ctx = this.canvas.getContext("2d")
    //填充颜色
    this.ctx.fillStyle = "blue"
    //开始绘制填充矩形
    this.ctx.fillRect(100,100,100,100)
    console.log(this.ctx)
  }
}

• 矩形边框

export class AppComponent implements OnInit{
  canvas
  ctx
  ngOnInit(): void {
    //获取画布
    this.canvas  = document.getElementById("canvas")
    //获取上下文
    this.ctx = this.canvas.getContext("2d")
    //边框颜色
    this.ctx.strokeStyle="red"
    //开始绘制
    this.ctx.strokeRect(100,100,100,100)
    console.log(this.ctx)
  }
}

擦除画布

this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)

• 绘制路径
  （逆时针绘制）

export class AppComponent implements OnInit{
  canvas
  ctx
  ngOnInit(): void {
    //获取画布
    this.canvas  = document.getElementById("canvas")
    //获取上下文
    this.ctx = this.canvas.getContext("2d")
    //创建一个路径
    this.ctx.beginPath()
    //移动画笔绘制点
    this.ctx.moveTo(100,100)
    //描述行进路径节点
    this.ctx.lineTo(200,200)
    this.ctx.lineTo(400,180)
    this.ctx.lineTo(380,50)
    //封闭路径
    this.ctx.closePath()
    //画笔颜色
    this.ctx.strokeStyle = 'red'
    //开始绘制
    this.ctx.stroke()
  }
}

线条可以不封闭---this.ctx.closePath()，但fill会自动封闭

image.png

绘制圆弧

export class AppComponent implements OnInit{
  canvas
  ctx
  ngOnInit(): void {
    //获取画布
    this.canvas  = document.getElementById("canvas")
    //获取上下文
    this.ctx = this.canvas.getContext("2d")
    this.ctx.arc(200,200,100,0,2*Math.PI,false)
    //this.ctx.arc(200,200,100,0,2*3.14,false)
    
    this.ctx.fill()    //填充
    // this.ctx.stroke()      //边框
    
  }
}

鼠标炫彩小球效果

小球触边反弹

小球靠近连线

线型

渲染图片到画布

资源管理器的封装

变形

刮刮乐

    
    
    
    
    


    

        中奖100万
        
    
    

拖拽