canvas简易使用

最新推荐文章于 2024-07-22 14:19:33 发布

等下一个约定8

最新推荐文章于 2024-07-22 14:19:33 发布

阅读量304

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_59342999/article/details/128008459

版权

Canvas(画布) 签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形

可用于在画布上绘制文本、线条、矩形、圆形等等。

绘制有两种方式  一种是填充 fill 一种是无填充 stroke

fillStyle   设置颜色
strokeStyle 设置颜色

矩形:
x y 位置 w h 宽高
ctx.rect(x,y,w,h)

ctx.clearRect(x,y,w,h)
线性
beginPath() 开启一个新的路路径
lineWidth 线宽
lineCap 线条端点样式
lineJoin 线条相交时的样式
圆形
x,y,r,startAngle,endAngle 单位弧度制
ctx.arc(100,100,50,0,Math.PI/2)
曲线
二次贝塞尔曲线
第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点
ctx.quadraticCurveTo(100, 100, 200, 20);
三次贝塞尔曲线
前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
转换
scale() 缩放当前绘图至更大或更小。
rotate() 旋转当前绘图。
translate() 重新映射画布上的 (0,0) 位置。
文字
ctx.font=“30px 楷体”
ctx.strokeText(“hello”,100,100)
ctx.fillText(“hello”,100,100)

绘制图片
ctx.drawImage(img, 10, 10);

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>验证码</title>
  <style>
    main {
      display: flex;
      justify-content: center;
    }

    input {
      height: 40px;
      width: 200px;
      padding-left: 15px;
      outline: none;
    }

    canvas {
      border: 1px solid lightblue;
      border-radius: 4px;
      margin: 0 20px;
    }

    button {
      padding: 0 10px;
    }
  </style>
</head>

<body>
  <main>
    <input type="text" placeholder="输入验证码(不区分大小写)" />
    <canvas width="140" height="40" onclick="changeCode()"></canvas>
    <button id="submit" onclick="submit()">提交</button>
  </main>
  <script>
    /*
    1.展示随机的验证码  
      (1)随机生成字符randomCode(count)
      (2)随机生成点randomDot()
      (3)随机生成线条randomLine()
    2.随机颜色 randomColor()
    3.切换验证码 changeCode() 
  */
    var ipt = document.querySelector("input")
    var cvs = document.querySelector("canvas");
    var ctx = cvs.getContext("2d");
    function changeCode() {

      ctx.clearRect(0, 0, 140, 40)
      //   随机生成15个圆点
      for (var i = 0; i < 15; i++) {
        ctx.beginPath();
        var x = randomNum(1, 135)
        var y = randomNum(0, 39)
        var r = randomNum(1, 3)
        ctx.fillStyle = randomColor()
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fill()
      }
      //  生成线条
      for (var i = 0; i < 4; i++) {
        ctx.beginPath()
        ctx.strokeStyle = randomColor()
        ctx.lineWidth = randomNum(1, 3)
        var x1 = randomNum(1, 135)
        var y1 = randomNum(0, 39)
        var x2 = randomNum(1, 135)
        var y2 = randomNum(0, 39)
        ctx.moveTo(x1, y1)
        ctx.lineTo(x2, y2)
        ctx.stroke()
      }
      // 生成文字
      for (var i = 0; i < 4; i++) {
        var res = randomWord()
        ctx.font = `${randomNum(20, 40)}px 楷体`
        ctx.fillStyle = randomColor();
        ctx.fillText(res, 30 * i + 20, 30)
      }


    }

    changeCode()

    //    封装一个函数用于产生随机数 包含a 和 b
    function randomNum(a, b) {
      return Math.floor(Math.random() * (b - a + 1) + a)
    }

    //    封装一个函数用于随机颜色
    function randomColor() {
      var r = randomNum(0, 255)
      var g = randomNum(0, 255)
      var b = randomNum(0, 255)
      return `rgb(${r},${g},${b})`
    }

    //    封装一个函数用于随机产出 字符数字
    function randomWord() {
      var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
      return str[randomNum(0, str.length - 1)]

    }

    console.log(randomWord());


  </script>
</body>

</html>