<!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. pwn学习日记Day2 基础知识积累

    知识杂项 shell-storm.org的shellcode数据库 使用pwntools库把shellcode作为输入传递给程序,尝试使用io.interactive()与程序进行交互,发现可以执行s ...

  2. MATLAB绘制函数图

    序言 Matlab可以根据用户给出的数据绘制相应的函数图.对于单个2D函数图,需要给出一个行向量x作为函数图上离散点集的横坐标,以及一个与x列数一样的横坐标y作为函数图上点集的纵坐标. 向量x和y的取 ...

  3. ZY

    2017*****1022:我是石翟夫:我的爱好是计算机: 我的码云个人主页是:https://gitee.com/S_DiF/events 我的第一个项目地址是:https://gitee.com/ ...

  4. 快速排序 之添加复合插入排序和原始序列取中值左pivot

    quicksort中,当n小于一定值时,排序效率就比直接插入排序底了,所以,此时就不要再递归下去了,直接插入排序好了:快速的原理就是因为折半递归,所以初始pivot应该有个好一点的选择,这里在原序列左 ...

  5. TextField widgets require a Material widget ancestor

    TextField widget需要被包裹在Scaffold widget中,否则会报错

  6. html 类似雷达扫描效果 及 闪屏效果

    //雷达扫描效果 1 <em id="Radar" class="RadarFast"></em> css: .RadarFast{ p ...

  7. mutex,thread

    //#include <stdio.h> //#include <stdlib.h> //#include <unistd.h> #include <wind ...

  8. Python笔记之数据类型

    数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...

  9. ubuntu14.04安装opencv3.1

    1.下载opencv3.1源码http://opencv.org/releases.html 2.安装opencv3 2.1安装opencv3的依赖 sudo apt-get install buil ...

  10. 文件下载后台报错IllegalStateException: getOutputStream() has already been called

    java.lang.IllegalStateException: getOutputStream() has already been called <%@page language=" ...