首页 > 代码库 > html5 canvas 绘制五角星
html5 canvas 绘制五角星
html5 中的 canvas 元素使用 javascript 在网页上绘制图像，今天就写一下如何使用 canvas 绘制一个五角星。
代码如下：
html 代码
<canvas id="myCanvas">你的浏览器不支持canvas</canvas>
javascript 代码
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext(‘2d‘);
canvas.width=300;
canvas.height=300;
create5star(context);
context.stroke();
function create5star(context){
var dx=200;
var dy=100;
var s=100;
context.beginPath();
context.fillStyle="red";
var dig=Math.PI/5*4;
for(var i=0;i<5;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
</script>
效果图：
html5 canvas 绘制五角星
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。