Four gradient play button effects drawn using javascript and HTML5 Canvas-JS Tutorial-php.cn

Four gradient play button effects drawn using javascript and HTML5 Canvas

不言

Release： 2018-07-03 11:19:40

Original

1801 people have browsed it

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

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>

Copy after login

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!