<!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('myCanvas');/*获取定义的画布*/

var ctx = canvas.getContext('2d');/*利用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, '#fccb02');

yellowGrad.addColorStop(0.5, '#fbf14d');

yellowGrad.addColorStop(1, '#ffcb02');

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

blueGrad.addColorStop(0, '#2a459c');

blueGrad.addColorStop(0.5, '#0e7adc');

blueGrad.addColorStop(1, '#2a459e');

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

redGrad.addColorStop(0, '#d0372f');

redGrad.addColorStop(0.5, '#e0675e');

redGrad.addColorStop(1, '#ce392d');

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

greenGrad.addColorStop(0, '#059700');

greenGrad.addColorStop(0.5, '#02e003');

greenGrad.addColorStop(1, '#019a02');

//绘制两弧夹角内容

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, '#4672df');

lingrad.addColorStop(0.2, '#6188e5');

lingrad.addColorStop(0.5, '#98b1ef');

lingrad.addColorStop(0.8, '#b1c3f2');

lingrad.addColorStop(1, '#eaedfc');

_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, '#99d4ea');

trianglerad.addColorStop(0.2, '#5e8fdd');

trianglerad.addColorStop(0.5, '#0f17a1');

trianglerad.addColorStop(0.8, '#4c65cc');

trianglerad.addColorStop(1, '#7299e5');

_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>

canvas 经典播放器图标的更多相关文章

  1. 首页音乐播放器添加"多首音乐"

    添加音乐播放器可以去这个博主的网址参考学习 原文链接:http://www.cnblogs.com/RhinoC/p/4695509.html 以下是针对添加“多首音乐”的详细过程: (注:由于之前并 ...

  2. canvas 视频音乐播放器

    canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img ...

  3. 【重点突破】——Canvas技术绘制音乐播放器界面

    一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求  点 ...

  4. 基于canvas和Web Audio的音频播放器

    wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你能够使用它来制作各种HTML5音频播放器,它能够在各种支持 Web A ...

  5. 【竞品分析】Android音乐播放器的竞品分析

    迄今为止最长的一篇博客,各位看官笑纳~~ 本次分析基于Android平台,选取了几款我体验过的播放器进行比较分析.主要分为两类,一类是大而全的,功能全面,可满足用户管理歌曲.导入导出歌单等多方面需求, ...

  6. 简约的HTML5音乐播放器插件

    从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方.最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧 因为追求简约 ...

  7. android 音乐播放器

    本章以音乐播放器为载体,介绍android开发中,通知模式Notification应用.主要涉及知识点Notification,seekbar,service. 1.功能需求 完善音乐播放器 有播放列 ...

  8. 网页播放器（jsp、js）

    jsp对控件显示 <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

  9. HTML5打造的炫酷本地音乐播放器-喵喵Player

    将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...

随机推荐

  1. STM32_DAC之软件触发（Trigger）

    stm32_DAC可以用来输出固定的电压值,有些时候需要按键可调输出的电压值.其中一种方法是使用外部中断EXTI9, 另外一种方法就是使用软件触发. 如果将DAC_InitTypeDef.DAC_Tr ...

  2. puppeteer(五）chrome启动参数列表API

    List of Chromium Command Line Switches https://peter.sh/experiments/chromium-command-line-switches/ ...

  3. Nodejs使用robot操作鼠标键盘

    1.安装robotjs库 前提是配置了cnpm cnpm i robotjs -g   2.如果报错VCBuild.exe,如下可以安装windows-tool MSBUILD : error MSB ...

  4. 18.12.09-C语言练习：黑洞数 / Kaprekar问题

    题目: 程序: #include <stdio.h> int main(void) { int n, a, b, c, t, A, B; printf("输入一个三位数整数:&q ...

  5. meterpreter 持久后门

    创建持久后门 当成功获取目标系统的访问权限后,需要寻找方法来恢复与目标主机的连接,而无需再进入目标系统.如果目标用户破坏了该连接,例如重新启动计算机,此时使用后门将允许自动重新与目标系统建立连接.为了 ...

  6. luogu P1578 奶牛浴场

    很好的一道题 王知昆爷爷的论文(讲的特别清楚) https://wenku.baidu.com/view/bc8311f69e314332396893f7.html 先贴上AC代码 #include& ...

  7. css基础重点内容总结

    一.目录引入 ./同级(当前) ../上级目录  ../../上上级目录 二.标签种类: 1.块级标签(block):独占一行,宽高可设: 2.行内块标签(inline-block):不独占一行,宽高 ...

  8. Tableau 学习资料

    官方文档: https://www.tableau.com/zh-cn/support/help 其他教程: tablaue破解版_tableau10 破解_tableau server 破解:htt ...

  9. 在.NET Core使用TimeZone将客户端时间转服务器本地时间但编译提示已过期

    当我们的项目国际化后,需要处理时区问题. 在.NET Core之前我们可以通过以下代码将客户端时间转换为服务端时间: DateTime serverTime = TimeZone.CurrentTim ...

  10. 使用session和cookie实现用户登录：一个登录页面，一个servlet，一个登录成功页面

    文件目录 1.登录页面 <%@ page language="java" contentType="text/html; charset=utf-8" p ...