canvas 和 css画三角形

最新推荐文章于 2024-04-27 00:14:39 发布

呜脑袋不够用

最新推荐文章于 2024-04-27 00:14:39 发布

阅读量272

点赞数

分类专栏： Html & CSS

本文链接：https://blog.csdn.net/weixin_41246825/article/details/115661409

版权

Html & CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的新标签canvas，它是一个用于绘制图形的图形容器。通过JavaScript，我们可以利用canvas API来绘制和填充三角形。示例中展示了如何使用脚本绘制填充和描边的上三角形。此外，还提到了使用CSS直接绘制上三角形的方法，包括两种不同的实现方式。

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

1：html5的新标签

canvas 介绍：
- canvas 是html5的一个新标签，属于h5 的新特性
- canvas标签是一个图形容器，可以视为是一块画布，可以画各种图形
- canvas是通过javascript来画的，即脚本绘制图形

2：画三角形（上三角）

<body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
<script>
function draw() {
    // 获取画布
    var canvas = document.getElementById('canvas')
    // 用于验证浏览器是否支持canvas,它是h5的新特性，老版本ie不支持
    if(canvas.getContext){
       // 可选2d和3d
       var ctx = canvas.getContext("2d")
       
        // 路径画填充三角形
        ctx.beginPath() // 新建一个路径，绘制到指定路径上
        ctx.moveTo(75,50) // 路径从哪开始
        ctx.lineTo(50, 75) // 到哪个点
        ctx.lineTo(100, 75)
        ctx.fill(); // 填充内容区域，生成实心图
        
        // 路径画描边三角形
        ctx.beginPath()
        ctx.moveTo(75,50) 
        ctx.lineTo(50, 75)
        ctx.lineTo(100, 75)
        ctx.closePath(); // 路径闭合方法
        ctx.stroke()
    }
}
</script>

2：css直接画

上三角：

// 直接画
.triangle {
     width:0;
     height:0;
     border-style:solid;
     border-width:0px 28px 28px 28px
     border-color: transparent transparent pink;
}
// 从正方形里截
.triangle {
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 20px;
    border-color: #fff #fff orange;
}