Home >Web Front-end >JS Tutorial >Four gradient play button effects drawn using javascript and HTML5 Canvas

Four gradient play button effects drawn using javascript and HTML5 Canvas

不言Original: 2018-07-03 11:19:401842browse

This article mainly introduces the effect of the four-gradient play button drawn using javascript and HTML5 Canvas. Friends in need can refer to it

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is a new label that appears in html5 , like all DOM objects, it has its own properties, methods and events, including the drawing method, which can be called by js to draw. This article uses the canvas tag and Javascript to draw a four-color gradient play button Effect, rendering:
Four gradient play button effects drawn using javascript and HTML5 Canvas
Implementation code:

<!DOCTYPE HTML>

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gbk">

  <title>画按钮</title>

  </head>

  <body>

  <canvas id="myCanvas" width="600" height="400">您的浏览器不支持Canvas，请升级浏览器！</canvas>

  <script type = "text/javascript" >

  var canvas = document.getElementById(&#39;myCanvas&#39;);/*获取定义的画布*/

  var ctx = canvas.getContext(&#39;2d&#39;);/*利用2维环境中进行绘画*/

  drawPlayButton(ctx,200,200);

  drawPlayButton(ctx,400,200);

  drawPlayButton(ctx,300,200);

  function drawPlayButton(_context,x,y){

  var nRadius=30;//半径

  _context.save();

  _context.translate(x,y);

  //构造线变

  var yellowGrad=_context.createLinearGradient(30,0,0,30);

  yellowGrad.addColorStop(0, &#39;#fccb02&#39;); 

  yellowGrad.addColorStop(0.5, &#39;#fbf14d&#39;); 

  yellowGrad.addColorStop(1, &#39;#ffcb02&#39;);

  var blueGrad=_context.createLinearGradient(30,0,0,30);

  blueGrad.addColorStop(0, &#39;#2a459c&#39;); 

  blueGrad.addColorStop(0.5, &#39;#0e7adc&#39;); 

  blueGrad.addColorStop(1, &#39;#2a459e&#39;);

  var redGrad=_context.createLinearGradient(30,0,0,30);//通过rotate来旋转

  redGrad.addColorStop(0, &#39;#d0372f&#39;); 

  redGrad.addColorStop(0.5, &#39;#e0675e&#39;); 

  redGrad.addColorStop(1, &#39;#ce392d&#39;);

  var greenGrad=_context.createLinearGradient(30,0,0,30);//通过rotate来旋转

  greenGrad.addColorStop(0, &#39;#059700&#39;); 

  greenGrad.addColorStop(0.5, &#39;#02e003&#39;); 

  greenGrad.addColorStop(1, &#39;#019a02&#39;);

  //绘制两弧夹角内容

  drawCake(_context,0,yellowGrad,nRadius);

  drawCake(_context,Math.PI/2,blueGrad,nRadius);

  drawCake(_context,Math.PI,redGrad,nRadius);

  drawCake(_context,3*Math.PI/2,greenGrad,nRadius);

  //内圆颜色

  var lingrad =_context.createLinearGradient(-30,-30,30,30);

  lingrad.addColorStop(0, &#39;#4672df&#39;); 

  lingrad.addColorStop(0.2, &#39;#6188e5&#39;); 

  lingrad.addColorStop(0.5, &#39;#98b1ef&#39;);

  lingrad.addColorStop(0.8, &#39;#b1c3f2&#39;);

  lingrad.addColorStop(1, &#39;#eaedfc&#39;);

  _context.save();

  _context.beginPath();//内圆

  _context.fillStyle=lingrad;

  _context.arc(0,0,nRadius-10,0,Math.PI*2,true); 

  _context.fill();

  _context.closePath();

  _context.restore();

  //绘制三角

  var trianglerad=_context.createLinearGradient(-6,-10,-6,10);

  trianglerad.addColorStop(0, &#39;#99d4ea&#39;); 

  trianglerad.addColorStop(0.2, &#39;#5e8fdd&#39;); 

  trianglerad.addColorStop(0.5, &#39;#0f17a1&#39;);

  trianglerad.addColorStop(0.8, &#39;#4c65cc&#39;);

  trianglerad.addColorStop(1, &#39;#7299e5&#39;);

  _context.beginPath();

  _context.fillStyle=trianglerad;

  _context.moveTo(12,0);

  _context.lineTo(-6,10);

  _context.lineTo(-6,-10);

  _context.fill();

  _context.restore();

  }

  //绘画一个扇形

  function drawCake(_context,_nRotateAngle,_fillColor,_nRadius){

  _context.save();

  _context.beginPath(); 

  _context.fillStyle=_fillColor;

  _context.rotate(_nRotateAngle);

  _context.moveTo(_nRadius-10,0);

  _context.lineTo(_nRadius,0);//向右画一根线

  _context.arc(0,0,_nRadius,0,Math.PI/2,false); 

  _context.lineTo(0,_nRadius-10);//向上画一个

  _context.arc(0,0,_nRadius-10,Math.PI/2,0,true); //逆时针画内弧

  _context.fill();

  _context.closePath();

  _context.restore();

  }

  </script>

  </body>

  </html>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the effect of JavaScript html5 canvas drawing villains

The above is the detailed content of Four gradient play button effects drawn using javascript and HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the effects of JavaScript+html5 canvas drawing villainsNext article：Introduction to the effects of JavaScript+html5 canvas drawing villains

See more

Four gradient play button effects drawn using javascript and HTML5 Canvas

Related articles