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

cysx009 2015-12-21 10:41:41

...全文
302 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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
  • 打赏
  • 举报
回复
业余草 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 );
}
}

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧