代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > html教程 > 使用javascript和HTML5 Canvas画的四渐变色播放按钮效果

使用javascript和HTML5 Canvas画的四渐变色播放按钮效果

html教程 围观7108次 更新日期:2017-06-25 14:40:53 留下足迹

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
  5. <title>画按钮</title> 
  6. </head> 
  7. <body> 
  8. <canvas id="myCanvas" width="600" height="400">您的浏览器不支持Canvas,请升级浏览器!</canvas> 
  9. <script type = "text/javascript" > 
  10.  
  11. var canvas = document.getElementById('myCanvas');/*获取定义的画布*/ 
  12. var ctx = canvas.getContext('2d');/*利用2维环境中进行绘画*/ 
  13. drawPlayButton(ctx,200,200); 
  14. drawPlayButton(ctx,400,200); 
  15. drawPlayButton(ctx,300,200); 
  16. function drawPlayButton(_context,x,y){ 
  17. var nRadius=30;//半径 
  18. _context.save(); 
  19. _context.translate(x,y); 
  20. //构造线变 
  21. var yellowGrad=_context.createLinearGradient(30,0,0,30); 
  22. yellowGrad.addColorStop(0, '#fccb02');  
  23. yellowGrad.addColorStop(0.5, '#fbf14d');  
  24. yellowGrad.addColorStop(1, '#ffcb02'); 
  25. var blueGrad=_context.createLinearGradient(30,0,0,30); 
  26. blueGrad.addColorStop(0, '#2a459c');  
  27. blueGrad.addColorStop(0.5, '#0e7adc');  
  28. blueGrad.addColorStop(1, '#2a459e'); 
  29. var redGrad=_context.createLinearGradient(30,0,0,30);//通过rotate来旋转 
  30. redGrad.addColorStop(0, '#d0372f');  
  31. redGrad.addColorStop(0.5, '#e0675e');  
  32. redGrad.addColorStop(1, '#ce392d'); 
  33. var greenGrad=_context.createLinearGradient(30,0,0,30);//通过rotate来旋转 
  34. greenGrad.addColorStop(0, '#059700');  
  35. greenGrad.addColorStop(0.5, '#02e003');  
  36. greenGrad.addColorStop(1, '#019a02'); 
  37.  
  38. //绘制两弧夹角内容 
  39. drawCake(_context,0,yellowGrad,nRadius); 
  40. drawCake(_context,Math.PI/2,blueGrad,nRadius); 
  41. drawCake(_context,Math.PI,redGrad,nRadius); 
  42. drawCake(_context,3*Math.PI/2,greenGrad,nRadius); 
  43. //内圆颜色 
  44. var lingrad =_context.createLinearGradient(-30,-30,30,30); 
  45. lingrad.addColorStop(0, '#4672df');  
  46. lingrad.addColorStop(0.2, '#6188e5');  
  47. lingrad.addColorStop(0.5, '#98b1ef'); 
  48. lingrad.addColorStop(0.8, '#b1c3f2'); 
  49. lingrad.addColorStop(1, '#eaedfc'); 
  50. _context.save(); 
  51. _context.beginPath();//内圆 
  52. _context.fillStyle=lingrad
  53. _context.arc(0,0,nRadius-10,0,Math.PI*2,true);  
  54. _context.fill(); 
  55. _context.closePath(); 
  56. _context.restore(); 
  57. //绘制三角 
  58. var trianglerad=_context.createLinearGradient(-6,-10,-6,10); 
  59. trianglerad.addColorStop(0, '#99d4ea');  
  60. trianglerad.addColorStop(0.2, '#5e8fdd');  
  61. trianglerad.addColorStop(0.5, '#0f17a1'); 
  62. trianglerad.addColorStop(0.8, '#4c65cc'); 
  63. trianglerad.addColorStop(1, '#7299e5'); 
  64. _context.beginPath(); 
  65. _context.fillStyle=trianglerad
  66. _context.moveTo(12,0); 
  67. _context.lineTo(-6,10); 
  68. _context.lineTo(-6,-10); 
  69. _context.fill(); 
  70. _context.restore(); 
  71. //绘画一个扇形 
  72. function drawCake(_context,_nRotateAngle,_fillColor,_nRadius){ 
  73. _context.save(); 
  74. _context.beginPath();  
  75. _context.fillStyle=_fillColor
  76. _context.rotate(_nRotateAngle); 
  77. _context.moveTo(_nRadius-10,0); 
  78. _context.lineTo(_nRadius,0);//向右画一根线 
  79. _context.arc(0,0,_nRadius,0,Math.PI/2,false);  
  80. _context.lineTo(0,_nRadius-10);//向上画一个 
  81. _context.arc(0,0,_nRadius-10,Math.PI/2,0,true); //逆时针画内弧 
  82. _context.fill(); 
  83. _context.closePath(); 
  84. _context.restore(); 
  85. </script> 
  86. </body> 
  87. </html> 

 

转载请注明:代码学堂>web前端 > html教程 > 使用javascript和HTML5 Canvas画的四渐变色播放按钮效果

喜欢 (319) or 分享 (328)