今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!
第一种方法:利用我们的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: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>
好了,这次的学习之旅就结束了,同学们学会了吗?