第一种方法：利用我们的html标签结合css来实现
span{
width:0px;
height:0px;
border-width:7px;
border-style:solid;
border-color:transparent transparent red transparent ;
}
border-width:三角形的大小；
border-color:transparent transparent red transparent ;这句话的意思是三角尖向上
border-color:设置三角尖的方向 transparent透明
border-color:三角尖朝下 朝左 朝上 朝右
（2）第二种写法
span{
display:block;
width:0px;
height:0px;
overflow:hidden;
border:7px solid transparent;
border-top-color:#2dcb70;
*/
position:absolute;
top:35px;
left:%;
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(,);
//moveTo(x,y)控制起始位置
cxt.lineTo(,);
// lineTo(x,y)控制结束位置,注意，这里是三条边，所以是三次
cxt.lineTo(,);
cxt.lineTo(,);
cxt.stroke();
// 开始执行
cxt.fill();
// fill填充
cxt.closePath();
//画完之后，必须关闭 </script>
好了，这次的学习之旅就结束了，同学们学会了吗？