当前位置：网站首页>Customer Rating Control

Customer Rating Control

2022-08-02 03:39:00 【cjx177187】

Pentagram rating control

 

<body>

    <style>

        #box {

            border: 1px solid black;

            margin: 100px 0 0 100px;

            width: 510px;

            height: 100px;

            position: absolute;

        }

    </style>

    <h1>点亮小星星:</h1>

    <div id="box"></div>

    <script>

        //画五角星

        //1.Draw a five-pointed star using a circle,Find five evenly spaced points on the circle

        //2.Use trigonometric functions to calculate the coordinates of each point,as the coordinates of the line

        //3.Connect the five dots in two intervals,form a five-pointed star.

        Object.prototype.start = function (x, y, r, color = "gray", ancolor = "yellow") {

            this.beginPath()

            var arr = []

            var deg = Math.PI / 180

            for (let i = 0; i < 5; i++) {

                //1.Draw a five-pointed star using a circle,Find five evenly spaced points on the circle

                //2.Use trigonometric functions to calculate the coordinates of each point,as the coordinates of the line

                var x1 = x + Math.cos((72 * i - 90) * deg) * r

                var y1 = y + Math.sin((72 * i - 90) * deg) * r

                arr.push(x1, y1)

            }

            //3.Connect the five dots in two intervals,form a five-pointed star.

            this.moveTo(arr[0], arr[1])

            this.lineTo(arr[4], arr[5])

            this.lineTo(arr[8], arr[9])

            this.lineTo(arr[2], arr[3])

            this.lineTo(arr[6], arr[7])

            this.lineTo(arr[0], arr[1])

            this.fillStyle = color

            this.fill()

            // this.stroke()

        }

        //封装一个canvas函数,Add a person to the boxcanvasDetermine the size of the five-pointed star according to the width and height of the box

        Object.prototype.canvas = function (n, color) {

            var canvas = document.createElement("canvas")

            var pen = canvas.getContext("2d")

            var r = this.offsetHeight / 2

            canvas.heigth = r * 2

            canvas.width = (this.offsetHeight + 4) * 5

            this.appendChild(canvas)

            //Determine the number of lit five-pointed stars,Fill the pentagram to be changed with yellow

            for (let i = 0; i < 5; i++) {

                if (i < n) {

                    pen.start(r + r * 2 * i, r, r, "yellow")

                } else {

                    pen.start(r + r * 2 * i, r, r, color)

                }

            }

        }

    </script>

    <script>

        var box = document.querySelector("#box")

        box.canvas()

        //给box绑定移动事件,Calculate which pentagram the mouse moves to through the properties of the event and the properties of the elastic box,Change the fill color of all the previous pentagrams to yellow

        box.onmousemove = function (el) {

            var n = Math.ceil((el.clientX - this.offsetLeft) / (this.offsetHeight + 4))

            this.innerHTML = " "

            this.canvas(n)

        }

    </script>

原网站

版权声明
本文为[cjx177187]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/214/202208020321320985.html

边栏推荐

猜你喜欢

随机推荐