Canvas基础学习

撞墙小球-1 简单版

• • 起点xy和r半径，本次画布宽和高900乘800。gogo就用来递增递减的1
• 开始定时clearRect清全屏
• 当横轴减半径小于等于0，证明快溢出了。赶紧反向
• 随之横轴往右增加，当他的值加半径等于 画布宽度！证明到头来
• x = x + (1或者-1) x + (-1) = x -1
• y 相同

重点：x += xgogo 而不是x++ 或者 xgogo++否则会变态快
相当于x+=30/40/50
其次，知识点函数只是做圆，想判断是否到顶部！必须在运行中的setInterval使用

    var canvas = document.getElementById("xx")
    var o = canvas.getContext("2d")

    var x = 100
    var y = 100
    var r = 30
    var w = 900
    var h = 800

    var xgogo = 1
    var ygogo = 1
    setInterval(function() {
        o.clearRect(0, 0, w, h)

        if (x - r <= 0 || x + r >= w) {
            xgogo = -xgogo
        }
        
        if (y - r <= 0 || y + r >= h) {
            ygogo = -ygogo
        }

        x += xgogo
        y += ygogo
        dream(x, y, r)
        console.log(x)
    }, 0.1)

    function dream(x, y, r) {
        o.beginPath()
        o.arc(x, y, r, 0, Math.PI * 2)
        o.fill()
    }

---

N数个球到处撞

1. 设置宽高w h
2. 做一个封装随机数 乘以数字。干加没效果，成了固定的100.0xxx
3. 创建对象，我的门派Ball里面是弟子x,y,r等。他们有不同的技能或者战斗值
4. 我自己创建了一个技能，需要弟子掺杂在这里。
5. 有创建了一个秘籍使用时间，在用技能的使用自动计算
6. 然后创建宝箱，宝箱就是你每次留下的门派记事簿。记录每个人的战斗值
7. 做一百个大招，但是没使用出来
8. 然后用10毫秒放一次大招！万剑归宗。每次排斥上次的大招。不然走火入魔
9. 最后for循环，数量就是你上次记录的ballArr.length。ballArr[1]的show,ballArr[2]的show。相当于new Ball.show()

重点：第一个for只是为了创建100个圆，他不能动。
第二个却在创建的同时规定每一个10好秒后递增，因为run在show里面

var canvas = document.getElementById("xx")
var o = canvas.getContext("2d")

var w = 900, // 宽900
    h = 800  //高800

function rdm(num) {
    return Math.random() * num //随机数乘以自选数
}

function Ball() {
    //当天是自创门派加点战斗值罢了
    this.x = rdm(100)+90
    this.y = rdm(100)+90
    this.r = rdm(90) + 10
    this.color = '#' + Math.random().toString(12).substr(2, 6);
    this.speedX = rdm(3) + 1
    this.speedY = rdm(2) + 3
}

Ball.prototype.show = function() {
    this.run()
    o.beginPath()
    o.arc(this.x, this.y, this.r, 0, Math.PI * 2)
    o.fillStyle = this.color
    o.fill()
}

Ball.prototype.run = function()
{
    if (this.x - this.r <= 0 || this.x + this.r >= w) {
        this.speedX = -this.speedX
    }
    
    if (this.y - this.r <= 0 || this.y + this.r >= h) {
        this.speedY = -this.speedY
    }
    
    this.x += this.speedX
    this.y += this.speedY
}

var ballArr = []

for (var i = 0; i < 100; i++) {
    var ball = new Ball()
    ballArr.push(ball)
    ball.show()
}


setInterval(function(){
    o.clearRect(0, 0, 900, 800)
    for(var i = 0; i < ballArr.length; i++ )
    {
        var xx = ballArr[i]
        xx.show()
    }
}, 10)

其实new Ball就是数据

直接用console.log(Ball)就知道了

Boll {
    color: "#017072"
    r: 68.17141885829253
    speedX: 2.8373152657900444
    speedY: 3.2036149041693514
    x: 122.69852212632031
    y: 522.8771673503535
}

---

用线连接在一起，加上文字配上

    var canvas = document.getElementById("xx")
    var o = canvas.getContext("2d")

    var w = document.documentElement.clientWidth - 10
    var h = document.documentElement.clientHeight - 25

    canvas.width = w
    canvas.height = h

    function rdm(num) {
        return Math.random() * num
    }


    function Boll(tit) {
        this.x = rdm(100) + 100
        this.y = rdm(100) + 100
        this.r = rdm(50) + 50
        this.color = '#' + Math.random().toString(12).substr(2, 6)
        this.speedX = rdm(1) + 2
        this.speedY = rdm(2) + 3
        this.tit = tit
    }


    Boll.prototype.show = function() {
        if (this.x - this.r <= 0 || this.x + this.r >= w) {
            this.speedX = -this.speedX
        }

        if (this.y - this.r <= 0 || this.y + this.r >= h) {
            this.speedY = -this.speedY
        }

        this.x += this.speedX
        this.y += this.speedY

        o.beginPath()

        o.font = "24px 微软雅黑"
        o.fillText(this.tit, this.x + this.r * 2, this.y)
        o.arc(this.x, this.y, this.r, 0, Math.PI * 2)
        o.fillStyle = this.color
        o.fill()


    }


    var tit = "苍井空 饭岛爱 波多野结衣 泷泽萝拉 景甜优美".split(" ")
    var arr = [];

    for (var i = 0; i < 5; i++) {
        var boll = new Boll(tit[i])
        arr.push(boll)
        boll.show()
    }

    setInterval(function() {
        o.clearRect(0, 0, w, h)
        for (var i = 0; i < arr.length; i++) {
            var xx = arr[i]
            xx.show()

            for (var j = 0; j < i; j++) {
                arr[j]

                o.beginPath()
                o.lineTo(arr[i].x, arr[i].y)
                o.lineTo(arr[j].x, arr[j].y)
                o.stroke()
            }

        }
    }, 10)