canvas 作星星打分三维图

原创 2015年11月19日 21:58:37
<div style="position:relative">
   <canvas id="star5" width = '400' height = '500'></canvas>
   <canvas id="star51" width = '400' height = '500' style="position:absolute;top:0;left:0"></canvas>
</div>
<script>
   var myCanvasbg = document.getElementById("star5");
   var context = myCanvasbg.getContext("2d");
   context.fillStyle ='rgba(255,0,0,.3)';//填充颜色:红色,半透明
   context.strokeStyle ='hsl(120,50%,50%)';//线条颜色:绿色
   context.lineWidth = 13;//设置线宽
   context.beginPath();
   context.moveTo(200,50);
   context.lineTo(100,223);
   context.lineTo(300,223);
   context.closePath();//可以把这句注释掉再运行比较下不同
   // context.stroke();//画线框
   context.fill();//填充颜色
  </script>
  <script>
  var a = 2; //输入值
  var b = 3; 
  var c = 4;

  var yuandiana = 200,
      yuandianb = 165.5;
  var firsta = 200,
      firstb = 50;
  var seconda = 100,
      secondb = 223;
  var thirda = 300,
      thirdb = 223;
  var totallong = 115.5;
  var secondc = yuandiana-(b/5)*100,
      secondd = yuandianb+(b/5)*57.75,
      thirdc = yuandiana+(c/5)*100,
      thirdd = yuandianb+(c/5)*57.75,
      firstc = yuandiana,
      firstd = yuandianb-(a/5)*115.5;
   var myCanvasstar = document.getElementById("star51");
   var context = myCanvasstar.getContext("2d");
   context.fillStyle ='rgba(255,225,0,.3)';//填充颜色:红色,半透明
   context.strokeStyle ='hsl(120,50%,50%)';//线条颜色:绿色
   context.lineWidth = 5;//设置线宽
   context.beginPath();
   context.moveTo(firstc,firstd);
   context.lineTo(secondc,secondd);
   context.lineTo(thirdc,thirdd);
   context.closePath();//可以把这句注释掉再运行比较下不同
   context.stroke();//画线框
   // context.fill();//填充颜色
  </script>


相关文章推荐

Python读取txt文件,并画三维图

记忆力差的孩子得勤做笔记!刚接触python,最近又需要画一个三维图,然后就找了一大堆资料,看的人头昏脑胀的,今天终于解决了!好了,废话不多说,直接上代码! #coding:utf-8 import ...

Matlab画三维图笔记

plot3 基本的三维曲线图绘制 plot3(x,y,z),x,y,z均为相同长度的向量,会得到三个向量相同下标构成的的三维坐标(xi,yi,zi)(i=1~n)连的曲线 plot3(X,Y,Z),X...

使用Matlab画出复杂网络博弈中热图(三维图)(学术论文)

如图所示,有的时候叫热图(可能根据不同的色彩分别吧),下面简单介绍下,有点累人的图。(Matlab所作,后面会给出代码) 具体需要看这幅图的横坐标与纵坐标的粒度是多少,比如这幅图,每幅子图选取的...

MFC TeeChart用法整理 三(三维图)

画三维图,就要添加三维类型的序列。         这里我们仍然以折线图作为范例。右击控件选择Properties,在TeeChart Pro Editor选项卡中单击Edit Chart,...

使用Matlab绘制三维图的几种方法

基于Matlab的六个用于绘制三维图像的函数......

三维图形成象的基本原理

一个三维模型/场景要成像和运动在屏幕上,至少需要下面的要素。数学苦手或者完全没接触过的朋友不用怕,了解一下先,具体的计算法我们会在以后的教程中一一说明。 模型和贴图: 三个点连接成一个三角形...
  • java211
  • java211
  • 2013年04月15日 15:21
  • 1831

CAD软件里绘制三维图

  • 2016年01月02日 17:52
  • 557KB
  • 下载

二维以及三维图

  • 2011年11月24日 18:03
  • 28.44MB
  • 下载

canvas漫天闪烁的星星

一.原理 星星之所以闪烁:采用的随机的抽取的星星发生缩放,从大足见变没有。 二.代码 当前浏览器不支持Canvas,请更换浏览器后再试 var ca...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:canvas 作星星打分三维图
举报原因:
原因补充:

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