canvas绘制缤纷多彩的三角效果完全实例,canvas绘

2019-09-02 13:50 来源:未知

正文实例汇报了JavaScript+html5 canvas绘制渐变区域的秘技。分享给大家供大家参照他事他说加以考察,具体如下:

本文实例陈述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果。分享给大家供我们参谋,具体如下:

运作效果截图如下:

运行效果截图如下:

图片 1

图片 2

切实代码如下:

实际代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   #canvas {
    border:3px solid gray;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
 </body>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.rect(0, 0, 200, 200);
  ctx.closePath();
  var gradient = ctx.createLinearGradient(0, 0, 200, 200);
  gradient.addColorStop(0, "gray");
  gradient.addColorStop(0.5, "red");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient;
  ctx.fill();
 </script>
</html>
<!DOCTYPE HTML>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   body {
    margin:0; padding:0; 
   }
   #canvas {
    width:500px; height:500px; border:3px solid #F2F2F2; box-shadow:0px 0px 25px #494949; margin:0 auto;
    margin-left:200px; margin-top:50px;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script type="text/javascript">
   var colorArray = "01234567890ABCDEFabcdef".split("");
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   function createTriangle(startPos, r, color) {
    var startX = startPos.x,
     startY = startPos.y;
     ctx.save();
     ctx.strokeStyle = color || "black";
     ctx.beginPath();
     ctx.lineWidth=2;
     ctx.moveTo(startX, startY);
     ctx.lineTo(startX+r*Math.sin(Math.PI/6), startY+r*Math.cos(Math.PI/6));
     ctx.lineTo(startX-r*Math.sin(Math.PI/6), startY+r*Math.cos(Math.PI/6));
     ctx.lineTo(startX, startY);
     ctx.closePath(); 
     ctx.stroke();
     ctx.restore();
   }
   function createColor() {
    var color = "#";
    for(var i=0; i<6; i++) {
     color += colorArray[Math.floor(Math.random()*colorArray.length)];
    }
    return color;
   }
   for(var i=0; i<100; i++) {
    var x = Math.round(Math.random()*500),
     y = Math.round(Math.random()*500),
     color = createColor();
    console.log(color);
    createTriangle({x: x, y: y}, 50, color); 
   }
  </script>
 </body>
</html>

越多关于js特效相关内容感兴趣的读者可查阅本站专题:《jQuery动画与特效能法总计》及《jQuery常见优良特效汇总》

更加多关于js特效相关内容感兴趣的读者可查看本站专项论题:《jQuery动画与特作用法计算》及《jQuery常见卓越特效汇总》

目的在于本文所述对咱们JavaScript程序设计有着协理。

仰望本文所述对我们JavaScript程序设计有着帮忙。

你只怕感兴趣的小说:

  • JS+canvas绘制的动态电子钟动画效用
  • js+html5贯彻canvas绘制圆形图案的秘技
  • js+canvas绘制五角星的艺术
  • js+canvas简单绘制圆圈的法子
  • javascript+HTML5 Canvas绘制转盘抽取奖品
  • js+html5贯彻canvas绘制镂空字体文本的方式
  • JavaScript+html5 canvas绘制的小丑效果
  • js+html5贯彻canvas绘制星型图案的措施
  • JS+canvas动态绘制饼图的方法身体力行

您大概感兴趣的小说:

  • JS Canvas电磁照应计时器模拟动态加载动画
  • JS基于HTML5的canvas标签达成炫彩标色相球动画效果实例
  • js canvas达成擦除动画
  • JavaScript+html5 canvas完结图片破碎重组动画特效
  • javascript+HTML5的Canvas完结Lab单车动画效果
  • js+canvas绘制五角星的不二秘技
  • js+canvas轻松绘制圆圈的点子
  • javascript+HTML5 Canvas绘制转盘抽奖
  • js+canvas绘制矩形的方法
  • JS+Canvas绘制时钟效果
  • JavaScript+html5 canvas绘制渐变区域一体化实例
  • JS+canvas绘制的动态手表动画作用
TAG标签:
版权声明:本文由990888藏宝阁发布于网络应用,转载请注明出处:canvas绘制缤纷多彩的三角效果完全实例,canvas绘