当前位置：网站首页>Canvas -- draw curve -- wall clock, pie chart, five pointed star

Canvas -- draw curve -- wall clock, pie chart, five pointed star

2022-07-26 03:11:00 【ca11meback】

arc()： Add an arc to the current path ;

grammar ：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Wall clock ：

Code thinking ：

First step ：

Draw a circle , Then we draw the scale inside , Use for Go round and draw the scale , If i yes 5 The multiple of increases the length of the scale , Use if And the judgment of remainder , How to draw ？ Starting from the center of the circle , To a point on the circle （x+r*cos,y+r*sin） One second is 60 A scale , So the default angle is 6,for Loop traversal 60 Time , This is the starting point , The end is （x+（r- The length of the scale )*cos,y+（r- The length of the scale )*sin）.

The second step ：

Gets the current time , Define the length of the hour hand, minute hand and second hand , Calculate the angle of the hour hand and minute hand according to the second hand .

The third step ：

Take the first two steps , Package into function , Because we need to write this function in the timer to let it continue to execute , So you need to empty the canvas , Empty the canvas first in the timer , And then separately , Call step 1 , Step two is written 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #box {
        border: 1px black solid;
    }
</style>

<body>
    <canvas id="box" height="700" width="700"> </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
        var deg = Math.PI / 180
        var angle = 6
        var kedu = 20
        function biao(){
            ctx.arc(300, 300, 200, 0, 360 * deg)
            for (i = 0; i < 60; i++) {
            var res
            if (i % 5) {
                res = kedu
            }
            else {
                res = kedu * 2
            }
            x1 = 300 + 200 * Math.cos(i * deg * angle)
            x2 = 300 + (200 - res) * Math.cos(i * deg * angle)
            y1 = 300 + 200 * Math.sin(i * deg * angle)
            y2 = 300 + (200 - res) * Math.sin(i * deg * angle)
            ctx.moveTo(x1, y1)
            ctx.lineTo(x2, y2)
        }
        ctx.stroke()
        } 

        function zhen() {
            var shizhen = 50
            var fenzhen = 100
            var miaozhen = 150
            var time = new Date().getSeconds()
            console.log(time)
            ctx.beginPath()
            ctx.moveTo(300, 300)
            var x3 = 300 + miaozhen * Math.cos(time * angle * deg-90*deg)
            var y3 = 300 + miaozhen * Math.sin(time * angle * deg-90*deg)
            ctx.lineTo(x3, y3)
            ctx.moveTo(300, 300)
            var x4 = 300 + fenzhen * Math.cos(time * angle / 60 * deg-90*deg)
            var y4 = 300 + fenzhen * Math.sin(time * angle / 60 * deg-90*deg)
            ctx.lineTo(x4, y4)
            ctx.moveTo(300, 300)
            var x5 = 300 + shizhen * Math.cos(time * angle / 60 / 12 * deg)
            var y5 = 300 + shizhen * Math.sin(time * angle / 60 / 12 * deg)
            ctx.lineTo(x5, y5)
            ctx.stroke()
        }
        setInterval(()=>{
            canvas.width=canvas.width
            biao()
            zhen()
        },1000)
    </script>
</body>

</html>

The pie chart ：

Code thinking ：

First step ： Get our data , The data here are all our own fake data , At present, it is only used as our case , Then we need to get the data from the back end , Sum the parts of the pie chart , Get the total value , The total value represents a whole circle .

The second step ： Use foreach Go through every numeric part of the array , Calculate their proportion in the total value , according to canvas The function of curve drawing can be known , Each cycle only draws that section of the curve, so we need to return to the center , Finally, change the starting angle of the next cycle to the ending angle of this cycle , Filling will automatically close , The previous settings will have random colors 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #box {
        border: 1px black solid;
    }
</style>

<body>
    <canvas id="box" height="700" width="700"> </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
        var deg = Math.PI / 180
        var arr = [{
				name: " Facet ",
				money: 10
			}, {
				name: " Hot pot ",
				money: 200
			}, {
				name: " String ",
				money: 100
			}, {
				name: " A vegetable ",
				money: 80
			},{
				name: " Hot Pot, Mongolian Style ",
				money: 300
			},{
				name: " Beef offal pot ",
				money: 168
			}]
			total=0;
			for(var i=0;i<arr.length;i++){
				total=total+arr[i].money
			}
            console.log(total)
            var start=60
            arr.forEach(element => {
                ctx.beginPath()
                var r=parseInt(Math.random()*255)
			    var g=parseInt(Math.random()*255)
			    var b=parseInt(Math.random()*255)
                ctx.fillStyle=`rgb(${r},${g},${b})`
                var bili=(element.money/total)*360
                ctx.arc(300,300,200,start*deg,(start+bili)*deg)
				ctx.lineTo(300,300)
				start=start+bili
				ctx.fill()
				ctx.stroke()

            });
    </script>
</body>

</html>

  Five-pointed star ：

Code thinking ： In fact, the design of five pointed star is simpler , Is to draw a circle , Then find five points with equal distance on the circle, and then connect these five points 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #box {
        border: 1px black solid;
    }
</style>

<body>
    <canvas id="box" height="700" width="700"> </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
        var deg = Math.PI / 180
        ctx.arc(300,300,200,0,360*deg)
        arr=[]
        for(i=0;i<5;i++){
            var dian={
                x:300 + 200*Math.cos((i*72)*deg),
                y:300 + 200*Math.sin((i*72)*deg)
            }
            arr.push(dian)
        }
        console.log(arr)
        ctx.moveTo(arr[0].x,arr[0].y)
        ctx.lineTo(arr[2].x,arr[2].y)
        ctx.lineTo(arr[4].x,arr[4].y)
        ctx.lineTo(arr[1].x,arr[1].y)
        ctx.lineTo(arr[3].x,arr[3].y)
        ctx.lineTo(arr[0].x,arr[0].y)
        ctx.stroke()

    </script>
</body>

</html>

Here is an explanation of why the order of connections is used 024130 The order of

Because the connecting line of the five pointed star is to separate a point , And then connect , If you follow the company, it will be a Pentagon

原网站

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

边栏推荐

猜你喜欢

随机推荐