如何用canvas画出这种图片的类似效果？

cysx009 2015-12-21 10:41:41

...全文

303 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2015-12-22

打赏
举报

引用 4 楼 cysx009 的回复:

用canvas的fillstyle背景图来填充好用么？

好用的 http://www.w3school.com.cn/tags/canvas_createpattern.asp

cysx009 2015-12-21

打赏
举报

用canvas的fillstyle背景图来填充好用么？

cysx009 2015-12-21

打赏
举报

不是呀

，现在需要的是黑白打印，所以想在各个板块里面形成不同的样式，比如黑点，斜线，黑白格什么的。

业余草 2015-12-21

打赏
举报

http://blog.csdn.net/jia20003/article/details/10165009 你赶紧结贴吧

业余草 2015-12-21

打赏
举报

function drawCircle(canvasId, data_arr, color_arr, text_arr) {

    var pi2 = Math.PI*2;

    var canvas =document.getElementById(canvasId);    

    var c =canvas.getContext("2d");

    c.font ="12px Times New Roman";

    var startAgl = 0;

    var agl;

    for(var i=0; i< data_arr.length; i++){ 

        //绘制饼图

        agl = data_arr[i] * pi2 + startAgl;

        c.fillStyle=color_arr[i];

        c.beginPath();

        c.moveTo(200,200);

        c.arc(200, 200, 150, startAgl, agl, false);

        c.lineTo(200,200);

        //c.stroke();

        c.fill();

        startAgl = agl;

        //绘制图例

        c.fillRect(360, 50+18*i,16,16);

        c.fillStyle="#000000";

        c.fillText(text_arr[i], 380, 62+18*i );    

    }

}