HTML5 Canvas饼图生成器

Pie Chart Generator，还包含一个可编辑的投票结果表格。

h5, canvas, chart

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2587
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let total = list.reduce((s, val) => {
                    val.value = +val.value;
                    return s + val.value;
                }, 0),
                totalListHeight = list.length * 3 * 10,
                middleTopOffset = h / 2 - totalListHeight / 2;

$.fillStyle = "white";
            $.fillRect(0, 0, w, h);
            for (let i = 0, val = 0; i < list.length; i++) {
                $.beginPath();
                $.arc(+ctrls.radius() + ctrls.thickness() * 2, h / 2, +ctrls.radius(), (val / total) * pi2 + piDeg * ctrls.gap(), (val += list[i].value) / total * pi2 - piDeg * ctrls.gap());
                $.strokeStyle = "#" + COLORS[i];
                $.lineWidth = ctrls.thickness();
                $.stroke();

$.fillStyle = "#" + COLORS[i];
                $.save();
                $.translate(ctrls.radius() * 2 + ctrls.thickness() * 3 + ctrls.listOffset(), middleTopOffset + 10 * i * 3);
                $.fillRect(0, 0, 10, 10);
                $.font = 15 + "px Open Sans";
                $.fillStyle = "black";
                $.fillText(list[i].name, 2 * 10, 10)
                $.restore();
            };
        }
    }

function oncreatedom(vnode) {
        model.dom = vnode.dom;
        ctrl.render(vnode)
    }

function view(vnode) {
        model.dom ? ctrl.render(vnode) : void 0;
        return m("canvas", {
            width: vnode.attrs.width,
            height: vnode.attrs.height
        })
    }
    return {
        view: view,
        oncreate: oncreatedom
    };
})

m.route(document.body, "/app", {
    "/app": App
});

编译

CSS

* {
    box-sizing: border-box;
    margin: 0;
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column no-wrap;
    flex-flow: column no-wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: -webkit-linear-gradient(45deg, #ee0979, #ff6a00);
    background-image: linear-gradient(45deg, #ee0979, #ff6a00);
    min-height: 100vh;
    min-width: 100vw;
    font-family: "Open Sans", sans-serif;
}
input[type=range].slider {
    -webkit-appearance: none;
    width: 100%;
    margin: 9px 0;
}
input[type=range].slider:focus {
    outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: rgba(29, 25, 28, 0.32);
    border-radius: 1px;
    border: 0px solid #ffffff;
}
input[type=range].slider::-webkit-slider-thumb {
    box-shadow: 0px 0px 4px #2c0000, 0px 0px 0px #460000;
    border: 7.2px solid rgba(255, 255, 255, 0.31);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -9px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
    background: rgba(87, 75, 84, 0.32);
}
input[type=range].slider::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: rgba(29, 25, 28, 0.32);
    border-radius: 1px;
    border: 0px solid #ffffff;
}
input[type=range].slider::-moz-range-thumb {
    box-shadow: 0px 0px 4px #2c0000, 0px 0px 0px #460000;
    border: 7.2px solid rgba(255, 255, 255, 0.31);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}
input[type=range].slider::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range].slider::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.32);
    border: 0px solid #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range].slider::-ms-fill-upper {
    background: rgba(29, 25, 28, 0.32);
    border: 0px solid #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range].slider::-ms-thumb {
    box-shadow: 0px 0px 4px #2c0000, 0px 0px 0px #460000;
    border: 7.2px solid rgba(255, 255, 255, 0.31);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    height: 2px;
}
input[type=range].slider:focus::-ms-fill-lower {
    background: rgba(29, 25, 28, 0.32);
}
input[type=range].slider:focus::-ms-fill-upper {
    background: rgba(87, 75, 84, 0.32);
}
.app--container {
    display: block;
    position: relative;
    background-color: #fcfcfc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5);
}
.app--container > div {
    float: left;
}
.app--title {
    padding: 16px;
    font-size: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.app--values--wrapper {
    width: 40%;
    height: 62.5%;
    border-right: 2px solid rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}
.app--values--wrapper .values--description {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin-left: 20%;
    color: rgba(0, 0, 0, 0.7);
}
.app--values--wrapper .values--description > div {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}
.app--values--wrapper .values--description-name {
    width: 70%;
    text-align: right;
    padding-right: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.app--values--wrapper .values--description-value {
    width: 30%;
    text-align: left;
    padding-left: 10px;
}
.app--values--wrapper .values--list {
    width: 100%;
    position: relative;
    display: block;
}
.app--values--wrapper .values--list .values--value-item {
    display: block;
    width: 100%;
    height: 50px;
    position: relative;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.8);
    outline: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.app--values--wrapper .values--list .values--value-item:nth-child(1) {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.app--values--wrapper .values--list .values--value-item > * {
    float: right;
    outline: 0;
}
.app--values--wrapper .values--list .values--value-item-name {
    width: 56%;
    padding-right: 10px;
    text-align: right;
    line-height: 50px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    height: 100%;
    overflow: hidden;
}
.app--values--wrapper .values--list .values--value-item-value {
    width: 24%;
    padding-left: 10px;
    line-height: 50px;
}
.app--values--wrapper .values--list .values--value-item > button {
    width: 25px;
    height: 25px;
    margin: 12.5px;
    border-radius: 50%;
    line-height: 100%;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.1s ease-out;
    transition: -webkit-transform 0.1s ease-out;
    transition: transform 0.1s ease-out;
    transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}
.app--values--wrapper .values--list .values--value-item > button:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: -webkit-transform 0.1s ease-out;
    transition: -webkit-transform 0.1s ease-out;
    transition: transform 0.1s ease-out;
    transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}
.app--values--wrapper .values--input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #fff;
}
.app--values--wrapper .values--input > * {
    border: 0;
    outline: 0;
    background-color: #fff;
    padding: 0;
}
.app--values--wrapper .values--input .values--input-submit {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    color: rgba(0, 0, 0, 0.6);
    height: 30px;
    width: 30px;
}
.app--values--wrapper .values--input .values--input-name {
    width: 56%;
    height: 100%;
    padding-right: 10px;
    text-align: right;
}
.app--values--wrapper .values--input .values--input-value {
    width: 24%;
    padding-left: 10px;
    height: 100%;
}
.app--canvas--wrapper {
    width: 60%;
    height: 62.5%;
}
.app--controls--wrapper {
    width: 100%;
    height: 37.5%;
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    position: relative;
}
.app--controls--wrapper .app--controls--holder {
    width: 100%;
    height: calc(100% - 55px - 15px);
    padding: 0px 100px;
    position: relative;
}
.app--controls--wrapper .app--controls--input {
    height: 50%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

HTML

Pie Chart Generator，还包含一个可编辑的投票结果表格。

h5, canvas, chart

编辑器支持Emmet

快捷键

Pie Chart Generator，还包含一个可编辑的投票结果表格。

h5, canvas, chart

HTML5 Canvas炫彩粒子特效生成器

HTML5 Canvas随机生成入侵者像素小怪物图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：