最好玩的标签--Canvas的基础使用

2024-07-16 15:02:01
开发
24

第一步创建上下文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        let canvas = document.getElementById('myCanvas')
        let ctx = canvas.getContext('2d')
        console.log('canvas',ctx)
    </script>
</body>
</html>

第二步使用

fillRect()方法

ctx.fillRect(10,10,50,50)

strokeRect()

ctx.strokeRect(20,20,60,60)

画圆

ctx.beginPath()
        ctx.arc(50,50,30,2*Math.PI,false)
        ctx.fillStyle = 'blue'
        ctx.lineWidth = 5
        ctx.storkeStyle = 'black'
        ctx.closePath()
        ctx.fill()
        ctx.stroke()

画一条线

ctx.beginPath()
        ctx.moveTo(30,40)
        ctx.lineTo(50,80)
        ctx.closePath()
        ctx.fill()
        ctx.stroke()

写字

ctx.font = '16px serif';
        ctx.fillStyle = 'black'
        ctx.fillText('你好', 50,50)
        ctx.strokeText('阿松大',80,80,50)

画一个笑脸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        let canvas = document.getElementById('myCanvas')
        let ctx = canvas.getContext('2d')
        console.log('canvas',ctx)
        
        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
        ctx.moveTo(110, 75);
        ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口 (顺时针)
        ctx.moveTo(65, 65);
        ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
        ctx.moveTo(95, 65);
        ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
        ctx.stroke();
    </script>
</body>
</html>

三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        let canvas = document.getElementById('myCanvas')
        let ctx = canvas.getContext('2d')
        console.log('canvas',ctx)
         // 填充三角形
        ctx.beginPath();
        ctx.moveTo(25, 25);
        ctx.lineTo(105, 25);
        ctx.lineTo(25, 105);
        ctx.fill();

        // 描边三角形
        ctx.beginPath();
        ctx.moveTo(125, 125);
        ctx.lineTo(125, 45);
        ctx.lineTo(45, 125);
        ctx.closePath();
  ctx.stroke();
    </script>
</body>
</html>

动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        let canvas = document.getElementById('myCanvas')
        let ctx = canvas.getContext('2d')
        console.log('canvas',ctx)
        let x = 0;
        setInterval(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(x, 50, 50, 50);
        x++;
        }, 10);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        let canvas = document.getElementById('myCanvas')
        let ctx = canvas.getContext('2d')
        let x = 0;

    function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 50, 50, 50);
    x++;
    requestAnimationFrame(animate);
    }
    animate()
                        
    </script>
</body>
</html>

画图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      // 调用函数绘制图形
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      ctx.lineWidth = 5;
      ctx.strokeStyle = "red";
      ctx.fillStyle = "blue";
      // 设置开关
      var flag = false;
      // 鼠标按下绘图
      canvas.onmousedown = (e) => {
        flag = true;
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
      };
      // 鼠标抬起停止绘图
      canvas.onmouseup = () => {
        flag = false;
      };

      // 鼠标移入绘图
      canvas.onmousemove = (e) => {
        if (flag) {
          ctx.lineTo(e.clientX, e.clientY);
          ctx.stroke();
        }
      };
    </script>
  </body>
</html>

时钟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        // 调用函数绘制图形
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        // 还原坐标系
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;

        // 将坐标系移动到中心点
        ctx.translate(centerX, centerY);
        
        // 绘制文本
        const radius = canvas.width / 2 - 5; // 时钟的半径

        ctx.font = "bold 14px Arial"; // 设置文本样式
        ctx.textAlign = "center"; // 设置文本对齐方式
        ctx.textBaseline = "middle"; // 设置文本基线为中间

        // 绘制钟表轮廓
        ctx.beginPath(); //开启路径
        ctx.arc(0, 0, radius, 0, 2 * Math.PI); // 绘制圆形
        ctx.stroke(); // 画线填充

        // 绘制钟表数字
        for (let i = 1; i <= 12; i++) {
            const angle = i * Math.PI / 6; // 分成12份 
            ctx.rotate(angle);
            ctx.translate(0, -radius + 15); // 将原点向上平移
            ctx.rotate(-angle);
            ctx.fillText(i.toString(), 0, 0);
            ctx.rotate(angle);
            ctx.translate(0, radius - 15); // 将原点向下平移
            ctx.rotate(-angle)
        }


        function drawClock() {
            const now = new Date();
            const radius = canvas.width / 2 - 5;
            ctx.clearRect(-centerX, -centerY, canvas.width, canvas.height); // 每次绘制前清空整个画布
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.stroke();

            // 绘制钟表数字
            ctx.font = "bold 14px Arial";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            for (let i = 1; i <= 12; i++) {
                const angle = i * Math.PI / 6;
                ctx.rotate(angle);
                ctx.translate(0, -radius + 15);
                ctx.rotate(-angle);
                ctx.fillText(i.toString(), 0, 0);
                ctx.rotate(angle);
                ctx.translate(0, radius - 15);
                ctx.rotate(-angle)
            }

            // 绘制时针
            const hour = now.getHours();
            const minute = now.getMinutes();
            const second = now.getSeconds();
            const hourAngle = (hour % 12 + minute / 60 + second / 3600) * Math.PI / 6;
            const hourLength = 0.6 * radius;
            const hourX = Math.sin(hourAngle) * hourLength;
            const hourY = -Math.cos(hourAngle) * hourLength;

            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(hourX, hourY);
            ctx.lineWidth = 4;
            ctx.lineCap = "round";
            ctx.stroke();

            // 绘制分针
            const minuteAngle = (minute + second / 60) * Math.PI / 30;
            const minuteLength = 0.8 * radius;
            const minuteX = Math.sin(minuteAngle) * minuteLength;
            const minuteY = -Math.cos(minuteAngle) * minuteLength;
            
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(minuteX, minuteY);
            ctx.lineWidth = 2;
            ctx.stroke();
            
            // 绘制秒针
            const secondAngle = second * Math.PI / 30;
            const secondLength = 0.9 * radius;
            const secondX = Math.sin(secondAngle) * secondLength;
            const secondY = -Math.cos(secondAngle) * secondLength;
            
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(secondX, secondY);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "red"; // 设置颜色
            ctx.stroke();
            
            // 绘制中央圆点
            ctx.beginPath();
            ctx.arc(0, 0, 5, 0, 2 * Math.PI);
            ctx.fillStyle = "#333"; // 设置颜色
            ctx.fill();
            
            // 循环绘制
            setTimeout(drawClock, 1000);
        }

        drawClock();

        // 循环绘制
        setTimeout(drawClock, 1000);

    </script>
  </body>
</html>

工作之余，玩一下canvas,哈哈

原文地址:https://blog.csdn.net/2201_75705263/article/details/140460802 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1813106798505365504.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部