<!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. MongoDB系列----mongostat

    mongostat是mongodb自带的监测工具,位于bin目录下.能用于实时监测mongodb的运行状态.在mongodb运行出现问题需要检测的时候应该优先考虑使用mongostat查看mongo运 ...

  2. OpenGL入门之入门

    programs on the GPU-------shader 顶点着色器-->形状(图元)装配-->几何着色器-->光栅化-->片段着色器-->测试与混合 图形渲染管 ...

  3. puppeteer（四）常见问题——部分元素无法操作，代码没任何问题。

    前言 最近写了一个小例子,但是一个page.click无论如何也不能正常操作,语法这么简单不可能有错.于是找原因,浏览器的问题吗?各种开发环境切换,nodejs版本换到较老的版本,npm版本切换,最后 ...

  4. mysql：数据库备份方案

    1. 数据库备份方案     1)没备份,跑路~     2)全量备份+增量备份 如果不小心“删库”,可以这么恢复: a. 将最近一次全量备份的全库找到,拷贝回来(文件一般比较大),解压,应用: b. ...

  5. vue 定义全局函数，监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  6. C#导出文本内容到word文档源码

    将做工程过程中较好的代码片段珍藏起来,下面的代码内容是关于C#导出文本内容到word文档的代码,希望能对小伙伴们也有好处.<%@ Page Language="C#" Aut ...

  7. linux用户键拷贝文件

    如果A用户没有权限写B用户下面的文件,可以用这个命令拷贝 scp AAA.tar.gz B用户名@IP:全路径

  8. Javascript在使用import 与export 区别及使用

    一.import与export的用法 1.import的几种用法 import defautName from 'modules.js'; import { export } from 'module ...

  9. Linq、Lambda表达式详细总结(转)

    (一)输入参数 在Lambda表达式中,输入参数是Lambda运算符的 左边部分.它包含参数的数量可以为0.1或者多个.只有当输入参数为1时,Lambda表达式左边的一对小括弧才可以省略.输入参数的数 ...

  10. Leetcode 树（102, 637）

    637: 二叉树的层平均值 给定一个非空二叉树,返回一个由每层节点平均值组成的数组: https://leetcode-cn.com/problems/average-of-levels-in-bin ...