html5中文学习网

您的位置: 首页 > html5教程 > 高级应用 » 正文

html5使用canvas画三角形_html5教程技巧

[ ] 已经帮助:人解决问题
这篇文章主要介绍了html5使用canvas画三角形,需要的朋友可以参考下

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>Q9mHTML5中文学习网 - HTML5先行者学习网
 Q9mHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
Q9mHTML5中文学习网 - HTML5先行者学习网
var canvas=document.getElementById("canvas");Q9mHTML5中文学习网 - HTML5先行者学习网
var cxt=canvas.getContext("2d");Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.beginPath();Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.moveTo(250,50);Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.lineTo(200,200);Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.lineTo(300,300);Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.closePath();//填充或闭合 需要先闭合路径才能画Q9mHTML5中文学习网 - HTML5先行者学习网
//空心三角形Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.strokeStyle="red";Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.stroke();Q9mHTML5中文学习网 - HTML5先行者学习网
//实心三角形Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.beginPath();Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.moveTo(350,50);Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.lineTo(300,200);Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.lineTo(400,300);Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.closePath();Q9mHTML5中文学习网 - HTML5先行者学习网
cxt.fill();Q9mHTML5中文学习网 - HTML5先行者学习网
Q9mHTML5中文学习网 - HTML5先行者学习网

Q9mHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助