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>


JS 实现简单星星评分功能

思路调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色代码 document示例 ...
  • mixi9760
  • mixi9760
  • 2016年07月26日 19:29
  • 3391

canvas demo之 画一个星星

想要使用canvas画一个五角星,关键即是找出十个顶点的坐标,我们当然可以用十句 context.lineTo来实现,但是这样没有任何意义,因为没办复用,而且代码冗余。实际上由一个位置坐标,以及一大一...
  • qq_20417227
  • qq_20417227
  • 2016年07月26日 11:59
  • 1310

用canvas绘制星星和月亮

用canvas绘制星星和月亮
  • Oraice
  • Oraice
  • 2015年11月07日 11:23
  • 2000

关于伪类的使用的一些心得以及星星评分效果的实现

最近在做一个网站的主头部,需要在超链接文字默认状态,点击时,点击后,选择的链接的状态不一样,实现颜色改变等效果,所以想到了使用伪类来控制,并且还需要在点击后超链接所在的标签文字成亮色显示,并且标签背景...
  • u014492098
  • u014492098
  • 2014年11月29日 10:43
  • 679

星星(用for循环)

package qsy; public class starsc {  public static void main(String[] args)  {int MAX=5;   for...
  • syspiritberry
  • syspiritberry
  • 2014年11月15日 23:54
  • 515

使用Canvas画一闪一闪的星星吧~

初学Canvas写了一个在一片区域内随机产生星星并且不断闪动的效果。具体实现如下所示。 首先创建一个canvas让其适配屏幕的大小。 h = screen.height - 200; ...
  • qq_32619577
  • qq_32619577
  • 2017年03月22日 10:46
  • 837

html,canvas——星星闪烁

学习慕课网笔记。点击知识点: 1.如何轮播序列帧 2.canvas API –drawImage() –globalAlpha –save –restore 3.如何添加鼠标...
  • bang3
  • bang3
  • 2017年11月16日 19:15
  • 193

20150811 canvas实现星星闪烁特效

1、轮播序列帧 2、canvas API :drawImage() globalAlpha Sava Restore 3、如何添加鼠标事件 循环调用gameloop方法总结: requestAni...
  • u013511989
  • u013511989
  • 2015年08月17日 19:39
  • 908

H5使用canvas实现星星闪烁效果

html star JS main.js var can; var ctx; var w,h; var girlPic = new...
  • u014041540
  • u014041540
  • 2016年08月12日 19:11
  • 5458

angular4小星星评分功能代码

好像好久没记录学到的新知识了,一开始呢没有活做,一直闲着,后来呢,有活了,但是很突然,导致没有时间写,哈哈哈。总在极与极之间转换,难免觉得生活枯燥工作压力大,可能这才是正常的工作状态吧,要慢慢调整自己...
  • AppleChen66
  • AppleChen66
  • 2017年08月18日 19:51
  • 211
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:canvas 作星星打分三维图
举报原因:
原因补充:

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