用css或html5画三角形的方法
发布时间： 2020-09-14 14:49:22
来源：亿速云
阅读： 83
作者：重要的早晨
本文主要介绍了如何使用css或html5绘制三角形。 本文介绍得非常详细，有一定的参考价值。 感兴趣的伙伴请务必阅读。
一、利用css的border属性，可以实现三角形的绘制
代码：
border属性--三角形. demo{
height:0；
width:0；
overflow :隐藏；
字体大小： 0；
行高： 0；
border-color : # ff 9600传输sparenttransparenttransparent；
border-style : soliddasheddasheddashed；
border-width:20px；
}
效果图：
利用css的border属性实现三角形的原理： css盒模型
一个盒子模型包含： marginborderpaddingcontent，上下左右边界出现平滑的斜线。 利用这一特征，通过改变上下左右边界的宽度和颜色可以得到小三角形、小梯形等。 通过调整宽度的大小可以调节三角形的形状。 demo {
height:20px；
width:20px；
border-color : # ff 9600 # 3366 ff # 12a d2a # f0eb 7a；
border-style:solid；
border-width:20px；
}
如果将height和width都设置为0，则会出现以下情况：
去掉所有其他颜色，只留下橙色，就得到三角形：
二、利用html5的canvas画布，可以实现三角形的绘制
canvas-绘制三角形的浏览器不支持canvas
window.nlad=function () {
var canvas=document.getelementbyid (canvas )； 获取canvas对象
varCTX=canvas.getcontext('2d )；//创建二维绘图上下文对象
ctx.beginPath (；
ctx.linewidth=20；
ctx.lineJoin='round '；//两条线相交时的角类型(miter尖角的默认“bevel”倾斜角“round”圆角)。
CTX.move to (10，10 )；
CTX.lineto (110，10 )；
CTX.lineto (60，50 )；
ctx.closePath (； //closePath ) )路径关闭
ctx.strokeStyle='blue '； //strokeStyle只填充该路径的颜色
ctx.fillStyle='red '； //fillStyle填充字体颜色、填充路径区域和图形区域
ctx.fill (； //fill )填充字体
ctx.stroke (；
}
效果图：
利用html5的canvas画布，可以实现三角形绘制的重点：
三角形画布中的三个坐标： move to (10，10 )----左上角坐标，CTX.Lineto ) 110，10 )----右上角坐标，CTX.Lineto ) 60，50 )------ -左上角坐标
以上是使用css或html5绘制三角形的全部方法。 谢谢您的阅读。 欢迎希望分享的内容对大家有所帮助，更多相关知识，亿速云行业资讯频道！