• canvas 绘画随机点


    直接看图吧;

    这样的随机点,是小圆点组成的,然后一直在动,记录一下,万一以后要用到呢;

    canvas的具体设置我就不写了,另一篇文档里有;

    drawRandomDot () {
    let leftCanvas = this.leftCanvas.nativeElement;
    let leftContext = leftCanvas.getContext("2d");
    let rightCanvas = this.rightCanvas.nativeElement;
    let rightContext = rightCanvas.getContext("2d");
    if(this.dotTimeTicket == null){
    this.dotTimeTicket = setInterval(function(){
    leftContext.clearRect(0,0,280,80);
    for(var i = 0; i < 14; i++){
    for(let j = 0; j < 55; j++){
    let random = Math.ceil(Math.random() * 10);
    if(random > 5){
    leftContext.beginPath();
    leftContext.arc(( 5*(j+1)),( 5*(i+1) ),2,0,2*Math.PI);
    leftContext.fillStyle="rgba(0,192,255,0.65)";
    leftContext.fill();
    leftContext.closePath();
    }
    }
    }
    rightContext.clearRect(0,0,280,30);
    for(var i = 0; i < 6; i++){
    for(let j = 0; j < 55; j++){
    let random = Math.ceil(Math.random() * 10);
    if(random > 5){
    rightContext.beginPath();
    rightContext.arc(( 5*(j+1)),( 5*(i+1) ),2,0,2*Math.PI);
    rightContext.fillStyle="rgba(0,192,255,0.65)";
    rightContext.fill();
    rightContext.closePath();
    }
    }
    }
    },300);
    }
    }
  • 相关阅读:
    Vue在移动端App中使用的问题总结
    CSS中的自适应单位vw、vh、vmin、vmax
    sass、less中的scoped属性
    CSS中的 , > + ~
    Git 使用的问题总结
    Vux的安装使用
    React-router的基本使用
    React使用的扩展
    React使用的思考总结
    React的基本使用
  • 原文地址:https://www.cnblogs.com/fmixue/p/8510895.html
Copyright © 2020-2023  润新知