вид пунктирного круга, измените цвет каждой точки с помощью css / js

#jquery #html #css #canvas

#jquery #HTML #css #холст

Вопрос:

я хотел бы отобразить это изображениеhttp://i.imgur.com/l8fbZM3.png (близко к половине круга) и иметь возможность изменять цвет каждой области.

На данный момент я решил проблему, создав разные картинки и изменив их с помощью jquery (css)

 $('.img').css('background-image','url(img/img_'  num   '.png)');

Этот метод очень ограничен, и я хотел бы сделать что-то более гибкое.
Какой метод будет выбран? Я нашел два возможных способа: 1) холст 2) SVG заливка

Я пробовал jCanvas, но я не нашел решения. Каков был бы путь?

1. это можно сделать только с помощью CSS3, хотя не уверен, что canvas или SVG могут сделать это лучше.

2. что было не так с вашим решением canvas?

3. я не смог найти решение с помощью canvas. итак, я придумал это временное решение. Могу ли я изменить цвет каждого элемента только с помощью CSS3?

Ответ №1:

Вот один пример использования html canvas.

введите описание изображения здесь

Аннотированный код и демонстрация:http://jsfiddle.net/m1erickson/QEP8x

 <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related references
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // set the line width used to draw the arc segments
    ctx.lineWidth=20;

    // variables related to drawing arc segments
    var PI=Math.PI;
    var PI2=PI*2;
    var cx=150;
    var cy=150;
    var radius=100;
    var arcRadians=PI2/14;
    var spacingRadians=PI2/70;
    var arcCount=7;
    var currentAngle=PI;

    // Draw arc segments from a centerpoint at a specified radius (cx,cy,radius)
    // Draw the specified count of arc segments (arcCount)
    // from the current radian angle (currentAngle)
    // with each segment having the specified arc (arcRadians)
    // and reducing each segment to allow specified spacing (spacingRadians)
    for(var i=0;i<arcCount;i  ){

        // calculate the starting and ending angle of an arc segment
        // allow for spacing between arcs
        var startingAngle=currentAngle;
        var endingAngle=startingAngle arcRadians-spacingRadians;

        // draw one arc segment
        ctx.beginPath();
        ctx.arc(cx,cy,radius,startingAngle,endingAngle);
        ctx.strokeStyle=randomColor();
        ctx.stroke();

        // increment the current angle for the next arc
        currentAngle =arcRadians;

    }

    // utility function -- generate a random color
    function randomColor(){ 
        return('#' Math.floor(Math.random()*16777215).toString(16));
    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>