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画出五角星画出星空

利用html5画出五角星 (在慕课网 )
  • Ailey_YY
  • Ailey_YY
  • 2014年11月17日 20:26
  • 1518

使用opengl绘制五角星图形

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

IOS之Quartz2D绘图2.随机绘制五角星

1.   单个五角星绘制 上次讲了在IOS中使用quartz2d绘制基本的图形,今天来绘制一个比较复杂的图形—五角星,五角星大家都很熟悉。 先来分析下五角星的画法,一个五角星如图所示。 ...
  • chen_xin_
  • chen_xin_
  • 2014年07月23日 14:32
  • 3223

canvas绘制一个五角星-常用绘图原理

先讲如何画一个正规的五角星 在五角星的内外画两个圆,五角星有五个角,360/5=72度 所以得出这两个角的度数     然后算出这两个点坐标   ...
  • u011724770
  • u011724770
  • 2017年05月01日 10:27
  • 907

android 五角星画法 五角星计算公式

计算依据,每个五角星的角度为36°,然后根据简单的勾股定理即可算出各个点的坐标,如下图所示 /** * @param xA 起始点位置A的x轴绝对位置 * @param ...
  • qq_15364915
  • qq_15364915
  • 2017年07月19日 18:15
  • 758

quick-cocos2d-x绘制五角星精灵矩阵

quick-cocos2d-x绘制五角星
  • Code_Nice
  • Code_Nice
  • 2015年09月06日 14:05
  • 683

OpenGL二 - 画一个五角星 pentagram

使用数学计算出10个五角星的坐标,然后画出图形。 效果如下: 一直想使用Polygen画是实心的,但是Polygen对于凹的地方支持不好,会出问题,所以就使用直线画了。 数学计算可以参考一个百度...
  • kenden23
  • kenden23
  • 2014年05月23日 21:16
  • 2295

OpenGL实验(一)彩色五角星绘制

Open Graphics Library (OpenGL)
  • birdy_
  • birdy_
  • 2017年03月27日 16:48
  • 871

OpenGL绘制五角星

#include #include #include "gl.h" #include "glut.h" //三棱锥的绘制 //2016-10-30 //Vizer #pragma comment(...
  • z1012178837
  • z1012178837
  • 2016年10月31日 17:37
  • 108

Android自定义View之三角,五角星,圆形,心形图片实现

好吧,写之前扯扯。这是本人的第一篇技术博客吧!
  • Joker_Ya
  • Joker_Ya
  • 2014年08月15日 20:13
  • 8012
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html绘制五角星。。
举报原因:
原因补充:

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