在HTML画布中创建切片的圆

Question

I am trying to create a circle with a gradient in an HTML canvas but don't really know where to start. I have played around but haven't managed to make any headway thus far.

I have managed to create the circle in CSS, but I cannot slice it as the gradient absolutely must stay at the same place on the circle and with CSS it requires rotation in order to slice up a circle...

Here is what I did in CSS and HTML:

HTML

<div id="progress"></div>

CSS

#progress {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    background: #5c00d2;
    background: -moz-linear-gradient(45deg,  #5c00d2 0%, #d586f4 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#5c00d2), color-stop(100%,#d586f4));
    background: -webkit-linear-gradient(45deg,  #5c00d2 0%,#d586f4 100%);
    background: -o-linear-gradient(45deg,  #5c00d2 0%,#d586f4 100%);
    background: -ms-linear-gradient(45deg,  #5c00d2 0%,#d586f4 100%);
    background: linear-gradient(45deg,  #5c00d2 0%,#d586f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c00d2', endColorstr='#d586f4',GradientType=1 );
    -webkit-box-shadow: inset 0px 0px 5px 3px rgba(5,71,110,0.5), inset 0px 0px 30px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0px 0px 5px 3px rgba(5,71,110,0.5), inset 0px 0px 30px 0px rgba(0,0,0,0.3);
    box-shadow: inset 0px 0px 5px 3px rgba(5,71,110,0.5), inset 0px 0px 30px 0px rgba(0,0,0,0.3);
}

Result

Update

I haven't made it very clear what I am trying to achieve here, See the following:

https://css-tricks.com/css-pie-timer/

Answer 1

You can achieve this by drawing on the canvas. The following code will get you going, but you can take a look at http://www.html5canvastutorials.com/ for more info.

<canvas id="myCanvas" width="144" height="144"></canvas>

<script>
function convertToRadians(degree) {
    return degree*(Math.PI/180);
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var sections = 6;
var radius = 70;

context.beginPath();
context.lineWidth = 2;
context.arc(radius + context.lineWidth, radius + context.lineWidth, radius, 0, 2 * Math.PI, false);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#8ED6FF');   
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();

for (i = 0; i < sections; i++){
    context.save();
    context.beginPath();
    context.moveTo(radius + context.lineWidth, radius + context.lineWidth);
    if (i) context.rotate(convertToRadians((i)*365/sections-context.lineWidth));
    context.lineTo(radius + context.lineWidth, (radius * 45) + context.lineWidth);
    context.strokeStyle = '#ffffff';
    context.stroke();
    context.restore();
}
</script>

http://codepen.io/anon/pen/LVXyKw

UPDATE TO ACCOMMODATE COMMENTS

<canvas id="myCanvas" width="200" height="200"></canvas>

function convertToRadians(degree) {
    return degree*(Math.PI);
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function showProgress(percent){
    console.log(percent);
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var sections = 6;
    var radius = 100;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    var grd = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
    grd.addColorStop(0, '#d586f4');   
    grd.addColorStop(1, '#5c00d2');
    context.fillStyle = grd;
    context.fill();

    context.beginPath();
    if (percent){
        var amt = ((2 / 100) * percent) + 1.5;
        if (amt > 2) amt = amt - 2;
        context.arc(centerX, centerY, radius, amt * Math.PI, 1.5 * Math.PI, false); //25%
    } else context.arc(centerX, centerY, radius, 0 * Math.PI, 2 * Math.PI, false); //0%

    context.lineWidth = (radius - .3) * 2;
    context.strokeStyle = '#ffffff';
    context.stroke();
}

var timer = setInterval(function(){ runTimer() }, 20);
var t = 0;

function runTimer(){
    if (t == 101) stopTimer();
    context.clearRect(0, 0, canvas.width, canvas.height);
    showProgress(t);
    t++;
}

function stopTimer() {
    clearInterval(myVar);
}

http://codepen.io/anon/pen/vOQZRg

Answer 2

Hey there not quite sure what your looking for but take a look at this hope it helps :)

  background: 
    linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0,
    linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%) 0 0,
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0, 
    linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%, 
    #43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: 1s;
}

http://codepen.io/thebabydino/pen/hkxGp