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

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

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

1. 圆形的绘画

canvas最基本的步骤：

let canvas = document.getElementById("canvas")

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

获取canvas这个点击事件
获取nvas元素的2D渲染上下文，'2d'指代二维绘图上下文。
填充矩形: ctx.fillRect(0,0,100,100) 这行代码在canvas上绘制了一个填充的矩形。fillRect(x, y, width, height)方法接受四个参数，分别代表矩形的左上角坐标(x, y)以及矩形的宽度和高度。在这个例子中，矩形的左上角位于(0, 0)，宽高都是100px，默认使用的是上下文的当前填充色（如果未指定，默认是黑色）。
设置描边颜色: ctx.strokeStyle = 'red' 这行代码设置了接下来要绘制图形的描边颜色为红色。strokeStyle属性控制了所有后续描边操作的颜色。
描边矩形: 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. 圆形倒计时：

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

圆环的制定：

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的结束这样整体的效果会更好。

计算数值：

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一样
    }这保证接下来的样式只生效于这一段。

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协同办公管理系统。