canvas 画布效果

最新推荐文章于 2024-08-28 21:44:39 发布

cdgogo

最新推荐文章于 2024-08-28 21:44:39 发布

阅读量208

点赞数

分类专栏： canvas画布文章标签： html5

本文链接：https://blog.csdn.net/cdgogo/article/details/120494117

版权

空心文本

<canvas id="myCanvas" width="300" height="100"></canvas>

// canvas绘制空心文本
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.font = 'italic bold 65px 宋体';
ctx.lineWidth = 2;
ctx.strokeStyle = '#f91a15';
ctx.strokeText('全民战役', 10, 70);

实心文本

<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // do cool things with the context
    context.font = '40pt Calibri';
    context.fillStyle = 'blue';
    context.fillText('Hello World!', 150, 100);
</script>
</body>

五角星

<!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>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
        // 使用id来寻找canvas元素
        var myCanvas = document.getElementById('canvas');
        if (myCanvas.getContext) {
     
            // 创建context对象
            // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
            var ctx = myCanvas.getContext("2d");
            // beginPath：开始绘制一段新的路径
            ctx.beginPath();
            var horn = 5; // 画5个角
            var angle = 360 / horn; // 五个角的度数
            // 两个圆的半径
            var R = 200;
            var r = 80;
            // 坐标
            var x = 200;
            var y = 200;
            for (var i = 0; i < horn; i++) {
     
                // 角度转弧度：角度/180*Math.PI
                // 外圆顶点坐标
                ctx.lineTo(Math.cos((18 + i * angle) / 180 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180 * Math
                    .PI) * R + y);
                // 內圆顶点坐标
                ctx.lineTo(Math.cos((54 + i * angle) / 180 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180 * Math
                    .PI) * r + y);
            }
            // closePath：关闭路径，将路径的终点与起点相连
            ctx.closePath();
            ctx.lineWidth = "3";
            ctx.fillStyle = '#E4EF00'; //填充颜色
            ctx.strokeStyle = "red"; //边框颜色
            ctx.fill();
            ctx.stroke();
        }
    </script>
</body>

</html>

动态时钟

<!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>
        * {
     
            margin: 0;
            padding: 0;
        }

        div {
     
            text-align: center;
        }

        div.box {
     
            margin: 50px auto;
            text-align: center;
            font-size: 30px;
            display: flex;
            align-content: center;
            justify-content: center;
        }

        span {
     
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border: 2px solid #ccc;
            font-size: 20px;
            margin: 0px 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="hour"></span>:
        <span id="minute"></span>:
        <span id="second"></span>
    </div>
    <div