为什么没有效果

来源:3-2 画一个五角星

来自火星的花

2017-04-03 20:41

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
 var c=document.getElementById("mycanvas");
 var context=c.getContext("2d");

   ctx.lineWidth=10;
   function drawstar(ctx,r,R,x,y,rot){
	 ctx.beginPath();
     for(var i=0;i<10;i++){
	  ctx.lineTo(Math.cos((18+(i*72)-rot)*Math.PI/180)*R+x,-Math.sin((18+(i*72)-rot)*Math.PI/180)*R+y);
	  ctx.lineTo(Math.cos((54+(i*72)-rot)*Math.PI/180)*r+x,-Math.sin((54+(i*72)-rot)*Math.PI/180)*r+y);
	 }
     ctx.closePath();
     ctx.stroke();
	}
</script>
</head>

<body>
<canvas id="mycanvas" width="800px" height="800px" style="border:1px solid #0F9">
 drawstar(context,150,300,400,400,30);
</canvas>
</body>
</html>


写回答 关注

1回答

  • 秋水
    2017-04-04 00:17:03
    已采纳

    1、五角星,循环5次即可

    http://img.mukewang.com/58e2755c00016b9507450183.jpg

    2、脚本必须包含在script标签内

    http://img.mukewang.com/58e2755b0001e8e106310140.jpg

    来自火星的花

    非常感谢!

    2017-04-08 21:41:53

    共 1 条回复 >

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题