<!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. JMeter+Ant-自动发送测试结果报告邮件

    build.xml文件 将这三个jar包(activation.jar.commons-email-1.2.jar.mail.jar)放到ant下的lib下 (我的是:/usr/local/Cella ...

  2. sql for xml path用法

    一.FOR XML PATH 简单介绍              那么还是首先来介绍一下FOR XML PATH ,假设现在有一张兴趣爱好表(hobby)用来存放兴趣爱好,表结构如下: 接下来我们来看 ...

  3. Oracle 11g R2 Backup Data Pump(数据泵)之expdp/impdp工具

    Oracle Data Pump(以下简称数据泵)是Oracle 10g开始提供的一种数据迁移工具,同时也被广大DBA用来作为数据库的逻辑备份工具和体量较小的数据迁移工具.与传统的数据导出/导入工具, ...

  4. sublime There are no packages available for installation 问题的解决办法

    这个是因为IPv6的原因, 因此我们需要修改我们的 /etc/hosts文件. 第一步: 执行: nm-tool 获取DNS的信息 例如: DNS: 192.168.1.11 第二步: 在/etc/h ...

  5. Javascript扩展String.prototype实现格式金额、格式时间、字符串连接、计算长度、是否包含、日期计算等功能

    <script src="Js/jquery-3.1.1.min.js"></script> <script type="text/java ...

  6. 关于sql server profiler 监控工具的使用

    勾选以下属性: 记录这个数据库访问磁盘的次数:

  7. Xamarin.Forms 未能找到路径“x:\platforms”的一部分

    https://stackoverflow.com/questions/45500269/xamarin-android-common-targets-error-could-not-find-a-p ...

  8. python类之魔法方法

    python类之魔法方法: class A(object): def __init__(self,x): self.x = x def __neg__(self): print('-v') def _ ...

  9. svn 安装

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  10. UIManager

    创建UIManager,管理所有UI面板 准备工作: 1. 创建Canvas并设置Tag为Main Canvas 2. 在Canvas下新建五个层级节点,因为UGUI显示层级越往下越靠前 using ...