利用css或html5畫出一個(gè)三角形的方法

這篇文章主要介紹利用css或html5畫出一個(gè)三角形的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為鳳慶等服務(wù)建站，鳳慶等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鳳慶企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

一、利用css的border屬性，即可實(shí)現(xiàn)三角形的繪制

代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border 屬性--繪制三角形</title>
		<style>
			.demo{
				height:0;
			    width:0;
			    overflow: hidden;
			    font-size: 0;
			    line-height: 0;
			    border-color:#FF9600 transparent transparent transparent;
			    border-style:solid dashed dashed dashed;
			    border-width:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

效果圖：

利用css或html5畫出一個(gè)三角形的方法

利用css的border屬性實(shí)現(xiàn)三角形的原理：css盒模型

一個(gè)盒子模型包括: margin+border+padding+content，上下左右邊框交界處出呈現(xiàn)平滑的斜線. 利用這個(gè)特點(diǎn), 通過設(shè)置不同的上下左右邊框?qū)挾然蛘哳伾梢缘玫叫∪? 小梯形等.調(diào)整寬度大小可以調(diào)節(jié)三角形形狀.

.demo {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

當(dāng)把height和width都設(shè)置成0后，得到：

利用css或html5畫出一個(gè)三角形的方法

把其他顏色都去掉，只留下橙色后，就得到一個(gè)三角形:

利用css或html5畫出一個(gè)三角形的方法

二、利用html5的canvas畫布，即可實(shí)現(xiàn)三角形的繪制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas-繪制三角形</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
    瀏覽器不支持canvas
</canvas>
<script>
        window.onload=function () {

            var canvas=document.getElementById("canvas");//獲取canvas對象

            var ctx=canvas.getContext("2d"); //創(chuàng)建二維的繪圖上下文對象

            ctx.beginPath();
            ctx.linewidth=20;
            ctx.lineJoin="round"; //兩條線交匯時(shí)的邊角類型（miter 尖角默認(rèn)  bevel斜角 round 圓角 ）
            ctx.moveTo(10,10);
            ctx.lineTo(110,10);
            ctx.lineTo(60,50);
            ctx.closePath(); //closePath() 關(guān)閉路徑  閉合
            ctx.strokeStyle="blue";// strokeStyle 只能填充該路徑的顏色
            ctx.fillStyle="red";// fillStyle 填充字體顏色、填充路徑區(qū)域、圖形區(qū)域
            ctx.fill();// fill() 填充字體
            ctx.stroke();
        }
    </script>
	</body>
</html>

效果圖：

利用css或html5畫出一個(gè)三角形的方法

利用html5的canvas畫布，即可實(shí)現(xiàn)三角形繪制的重點(diǎn):

三角形在畫布中的三個(gè)坐標(biāo)：moveTo(10,10)----左上角坐標(biāo)，ctx.lineTo(110,10)-----右上角坐標(biāo)， ctx.lineTo(60,50)----下面坐標(biāo)

以上是利用css或html5畫出一個(gè)三角形的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：利用css或html5畫出一個(gè)三角形的方法
鏈接地址：http://www.chinadenli.net/article34/peeise.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、定制網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站改版、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

利用css或html5畫出一個(gè)三角形的方法