LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

探索HTML5 Canvas:解锁JavaScript中的动态图形绘制技术,绘制验证码和进度条

freeflydom
2024年5月31日 10:11 本文热度 246

1. 圆形的绘画

canvas最基本的步骤:

let canvas = document.getElementById("canvas")

let ctx = canvas.getContext("2d")

  1. 获取canvas这个点击事件

  2. 获取nvas元素的2D渲染上下文,'2d'指代二维绘图上下文。

  3. 填充矩形: ctx.fillRect(0,0,100,100) 这行代码在canvas上绘制了一个填充的矩形。fillRect(x, y, width, height)方法接受四个参数,分别代表矩形的左上角坐标(x, y)以及矩形的宽度和高度。在这个例子中,矩形的左上角位于(0, 0),宽高都是100px,默认使用的是上下文的当前填充色(如果未指定,默认是黑色)。

  4. 设置描边颜色: ctx.strokeStyle = 'red' 这行代码设置了接下来要绘制图形的描边颜色为红色。strokeStyle属性控制了所有后续描边操作的颜色。

  5. 描边矩形: ctx.strokeRect(0,0,100,100) 最后这行代码在同样的位置(0, 0)绘制了一个宽度和高度都为100px的矩形的边框,颜色为之前设置的红色。strokeRect()方法只绘制边框,不填充内部。

效果是在canvas上首先绘制了一个100x100像素的填充矩形,然后在同一位置绘制了一个相同尺寸但只有边框的红色矩形,形成了一个带有红色边框的正方形。

        ctx.fillRect(0,0,100,100)

        ctx.strokeStyle = 'red' //

        ctx.strokeRect(0,0,100,100) // 描边


达到预期的效果。

再画一个圆形并且填充颜色:

 ctx.beginPath()     //多边形的描绘,开始一个路径的描述

        ctx.arc(150,75,50,0,2 * Math.PI)

        ctx.fillStyle = 'green'

        ctx.fill()


  • 开始路径: ctx.beginPath() 这行代码表示开始一个新的路径描述。在Canvas中,当你想要绘制独立的形状时(避免它们自动连接),通常会在绘制前调用此方法。这样可以确保新图形的起点不会与前一个图形的终点相连。

  • 绘制圆形: ctx.arc(150, 75, 50, 0, 2 * Math.PI) 这行代码用于绘制一个圆形。arc(x, y, radius, startAngle, endAngle) 方法用于创建弧线(用于圆形、部分圆等)。在这个例子中:

    • x 和 y 分别是圆心的坐标,即 (150, 75)

    • radius 是圆的半径,这里是 50 像素。

    • startAngle 和 endAngle 定义了圆弧的起始和结束位置,以弧度为单位。0 表示从三点钟方向开始,而 2 * Math.PI 表示完整一圈,因此会绘制一个完整的圆。

  • 设置填充颜色: ctx.fillStyle = 'green' 这行代码设置了即将填充图形的颜色为绿色。

  • 填充图形: ctx.fill() 调用 fill() 方法后,根据之前设置的填充颜色(这里是绿色),填充当前路径描述的内部区域,即刚刚定义的圆形。

到这里想一想镂空的圆形该怎么形成?

 ctx.beginPath()

        ctx.arc(150,75,50,0,2 * Math.PI)

        ctx.strokeStyle = 'blue'

        ctx.lineWidth = 6

        ctx.stroke()


只要注意下格式的更改,绘制圆形的轮廓和宽度即可。

2. 圆形倒计时:

这里主要可以分为三个部分:绘制圆环,数值的确定,以及绘画的运行。

  1. 圆环的制定:

function blueCircle(n) {

        ctx.save()

        ctx.strokeStyle = '#fff'

        ctx.lineWidth = 5

        ctx.beginPath()

        ctx.arc(centerX,centerY,100,-Math.PI / 2,-Math.PI /2 + n * rad)

        ctx.stroke()

        ctx.closePath() // 结束路径

        ctx.restore()

    }


这里注意一下有Begin的开始,就添加一个Close的结束这样整体的效果会更好。

  1. 计算数值:

function text(n) {

        ctx.save() //

        ctx.strokeStyle = '#fff'

        ctx.font = '40px Arial'

        ctx.strokeText(n.toFixed(0) + '%',centerX - 25,centerY + 10)

        // ctx.stroke()

        ctx.restore() // 跟save一样

    }这保证接下来的样式只生效于这一段。

  1. Draw的绘画

(function draw() {

            requestAnimationFrame(draw)

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


            text(speed)

            blueCircle(speed)

            if (speed >= 100) {

                speed = 100

            }

            speed += 0.1

        })()

这里的定时器除了基本的两种:setTimeout()  和  setTimeout(),还可以使用requestAnimationFrame()来执行。

基本的效果可以达成:

 


3. 验证码

其实验证码的写法也是类似,这里就不多叙述了,效果如下,

 

大家可以看看源码更正一下:

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>


<body>

    <canvas id="canvas" width="120" height="40" onclick="draw()"></canvas>




    <script>

        let pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'


        function randomNum(min, max) {

            return Math.floor(Math.random() * (max - min) + min)

        }


        function randomColor(min, max) {

            const r = randomNum(min, max)

            const g = randomNum(min, max)

            const b = randomNum(min, max)

            return `rgb(${r},${g},${b})`

        }



        function draw() {

            let canvas = document.getElementById("canvas");

            let ctx = canvas.getContext("2d");

            // 填充色 随机

            ctx.fillStyle = randomColor(100, 230)

            ctx.fillRect(0, 0, canvas.width, canvas.height)

            // 随机生成字符串

            let imgCode = ''

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

                const text = pool[randomNum(0, pool.length)]

                imgCode += text

                // 随机字体大小

                const fontSize = randomNum(18, 40)

                // 随机旋转角度

                const deg = randomNum(-30, 30)

                ctx.font = `${fontSize}px Simhei`

                ctx.textBaseline = 'top'

                ctx.fillStyle = randomColor(80, 150)

                ctx.save()  // 将当前状态封存入栈

                ctx.translate(30 * i + 15, 15)

                ctx.rotate((deg * Math.PI) / 180)

                ctx.fillText(text, -10, -15)

                ctx.restore() //


            }

            // 随机生成干扰线条

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

                ctx.beginPath()

                ctx.moveTo(randomNum(0, canvas.width), randomNum(0, canvas.height))

                ctx.lineTo(randomNum(0, canvas.width), randomNum(0, canvas.height))

                ctx.strokeStyle = randomColor(120,230)

                ctx.closePath()

                ctx.stroke()

            }

            // 随机小点

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

                ctx.beginPath()

                ctx.arc(randomNum(0,canvas.width),randomNum(0,canvas.height),1,0,2 * Math.PI)

                ctx.fillStyle = randomColor(150,200)

                ctx.closePath()

                ctx.fill()


            }

        }


        draw()

    </script>

</body>


</html>

作者:长安故里_
链接:https://juejin.cn/post/7373876901440815130
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



该文章在 2024/5/31 10:15:38 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved