今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！

第一种方法：利用我们的html标签结合css来实现

span{
    0px;
    height:0px;
    border-7px;
    border-style:solid;
    border-color:transparent transparent red transparent ;
}

border-三角形的大小；

border-color:transparent transparent red transparent ;这句话的意思是三角尖向上

border-color:设置三角尖的方向 transparent透明

border-color:三角尖朝下 朝左 朝上 朝右

（2）第二种写法

span{
display:block;
0px;
height:0px;
overflow:hidden;
border:7px solid transparent;
border-top-color:#2dcb70;
*/

position:absolute;
top:35px;
left:50%;
margin-left:-3px;*/

和上面的那一种基本一致，只是写法不一样！！

好，下面重量级人物登场了h5，此刻，撒花，撒花，撒花

咳咳，开始

<canvas width="900px" height="1000px" style="background:yellow;" id="hh"></canvas>
<script>
var hh=document.getElementById('hh');
        // 是否创建成功alert(hh);
        // alert(hh);
        // 初始化canvas元素
        // 创建2d画布
var cxt=hh.getContext('2d');
        // 测试是否创建成功alert(cxt);
        // alert(cxt);
        // beginPath开始路径
cxt.moveTo(300,500);
               //moveTo(x,y)控制起始位置
cxt.lineTo(300,600);
               // lineTo(x,y)控制结束位置,注意，这里是三条边，所以是三次
cxt.lineTo(400,550);
cxt.lineTo(300,500);
cxt.stroke();
               // 开始执行
cxt.fill();
              // fill填充
cxt.closePath();
              //画完之后，必须关闭


</script>

好了，这次的学习之旅就结束了，同学们学会了吗？