关闭

canvas 作星星打分三维图

标签: canvashtml
301人阅读 评论(0) 收藏 举报
<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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16093次
    • 积分:327
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论