html绘制五角星。。

转载 2016年06月01日 12:40:33
<!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>
  <title>canvas绘制五角星 </title>
  <script type="text/javascript" >
    window.onload = function () {
      var canvas = document.getElementById("canvas");
        
      if (canvas) {
        var context = canvas.getContext("2d");
        drawStar(context, 150, 500, 200);
      } else {
        document.writeln("浏览器不支持canvas组件");
      }
    }
    function drawStar(context, r, x, y) {
      context.lineWidth = 5;
      context.beginPath();
      var dit = Math.PI * 4 / 5;
      var sin = Math.sin(0) * r + y;
      var cos = Math.cos(0) * r + x;
      console.log(0+":"+0);
      context.moveTo(cos, sin);
      for (var i = 0; i < 5; i++) {
        var tempDit = dit * i;
        sin = Math.sin(tempDit) * r + y;
        cos = Math.cos(tempDit) * r + x;
        context.lineTo(cos, sin);
        console.log(sin+":"+sin+":"+tempDit);
      }
      context.closePath();
      context.strokeStyle = "red";
      context.fillStyle = "#DDDDDD";
      context.fill();
    }
  </script>
</head>
<body>
<canvas width="1000" height="1000" id="canvas" ></canvas>
</body>

</html>


相关文章推荐

HTML5_节点-五角星-萤火虫-兼容事件监听

1元素节点对象 (1)index.html id,class,title,style是所有共有的属性 例一: 例二 删除id之后,oBox也能用...

HTML 五角星 -- CSS

在HTML页面中显示wujiao

利用html5画出五角星画出星空

利用html5画出五角星 (在慕课网 )

Quartz2D绘制五角星

  • 2014年07月23日 14:31
  • 33KB
  • 下载

C++ OpenGL绘制五角星

  • 2014年08月23日 16:26
  • 1KB
  • 下载

使用opengl绘制五角星图形

最近开始学习opengl的开发方法,专门下载了>电子书,当看到使用opengl绘制五角星实例时,发现示例代码有错误,绘制不出正确图形,并且与程序说明中提出的计算公式有出入。本人经过重新梳理概念,查阅了...
  • zyobeer
  • zyobeer
  • 2015年10月25日 13:30
  • 2335

VC++绘制五角星(扫描线算法)

  • 2011年11月07日 18:49
  • 1.88MB
  • 下载

android绘制实心。空心五角星

package com.example.test; import android.annotation.SuppressLint; import android.content.Context; i...

五角星的绘制

  • 2015年03月30日 22:08
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html绘制五角星。。
举报原因:
原因补充:

(最多只允许输入30个字)