canvas写对号和差号，附带纯css的实现方式

最新推荐文章于 2022-04-23 15:36:50 发布

细雨良田

最新推荐文章于 2022-04-23 15:36:50 发布

阅读量445

点赞数

分类专栏： echarts 文章标签： canvas javascript

本文链接：https://blog.csdn.net/qq_31382751/article/details/117260516

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML样式创建符号以及利用Canvas API绘制图形。成功标志使用了CSS技巧实现45度旋转的绿色箭头，错误标志则通过Canvas描绘了一个红色的X形图案。这些图形常用于用户界面中表示状态反馈。

摘要由CSDN通过智能技术生成

<!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>Document</title>
    <style>
        .success{
            display: inline-block;
            font-weight: 700;
            margin: 0 10px;
            width: 8px;
            height: 13px;
            transform: rotate(45deg);
            border-style: solid;
            border-color: #009933;
            border-width:   0 4px 4px 0 ;
        }
        .error {
                width: 15px;
                height: 15px;
                margin: auto;
                position: relative;
                margin-left: 32px;
            }
            .error::before,
            .error::after {
                content: "";
                position: absolute;
                height: 18px;
                width: 3px;
                top: 0px;
                right: 15px;
                background: red;
            }
            .error::before {
                transform: rotate(45deg);
            }
            .error::after {
                transform: rotate(-45deg);
            }
    </style>
</head>
<body>
    <div class="success"></div>
    <br/>
    <div style="float:left;" class="error"></div>

    
    <canvas id="success" style="border: 1px solid red;"></canvas>
    <canvas id="error" style="border: 1px solid red;"></canvas>

    <script>
    window.onload=function(){
        var canvasSreen = document.getElementById('success');
        canvasSreen.width = 50;
        canvasSreen.height = 50;
　　　　　//当浏览器不支持canvas的时候，另一种提示方式
        if (canvasSreen.getContext('2d')) {
            var context = canvasSreen.getContext('2d');
            //使用context绘制
        }else{
            alert('当前浏览器不支持canvas，请更换浏览器后再试');
        }
　　　　

        context.beginPath();//开始路径状态
        context.moveTo(5,20);//笔尖落在哪
        context.lineTo(20,35);//笔尖走到哪
        context.lineTo(45,10);//笔尖落在哪
        context.lineWidth = 5;//笔水的大小
        context.strokeStyle = "red"; //笔的颜色
        context.stroke();//绘制
         

        var canvasError = document.getElementById('error');

        canvasError.width = 50;
        canvasError.height = 50;
        if (canvasError.getContext('2d')) {
            var ctx = canvasError.getContext('2d');
            //使用context绘制
        }else{
            alert('当前浏览器不支持canvas，请更换浏览器后再试');
        }

        ctx.beginPath();//开始路径状态
        ctx.moveTo(10,10);//笔尖落在哪
        ctx.lineTo(40,40);//笔尖走到哪
        ctx.lineWidth = 5;//笔水的大小
        ctx.strokeStyle = "red"; //笔的颜色
        ctx.stroke();//绘制

        ctx.beginPath();//开始路径状态
        ctx.moveTo(40,10);//笔尖落在哪
        ctx.lineTo(10,40);//笔尖走到哪
        ctx.lineWidth = 5;//笔水的大小
        ctx.strokeStyle = "red"; //笔的颜色
        ctx.stroke();//绘制

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