简介
      这是基于HTML5的Canvas而实现的在线画图及简单图片处理的工具，是我的计算机图形学期末课程设计作业。主要功能包括：画图、颜色反转、转灰度图、阴影效果、横向渐变、纵向渐变等。处理好的图片还能以png的格式下载到本地。不过，由于花的时间不多，没能深一步完善，不足之处还请见谅！
功能展示
画图


下载到本地的png




灰度图效果


颜色反转效果




横向渐变效果


阴影效果


源码下载
http://download.csdn.net/detail/qq_21419839/9546046

AI小案例功能

（作者：方庆生，撰写时间：2019年2月11日）

制作图案

首先呢讲一下为什么要用Adobe Illustrator CC制作图案不而不是用 Adobe Photoshop CC 图案呢。我们要先分清楚这2个Adobe软件的用处。Adobe Illustrator CC他制作的图案会很清晰不会出现跟Adobe Photoshop CC一样制作完会出现图片失帧的情况。

所以用Adobe Illustrator CC制作图案会更精致一点。



图1								图2

大家可以看一下图1是他的原图，我用AI进行绘图成图2，是不是比原图更加的清晰，在这种状态下的图2他不会出现图片失帧的状态。这就是AI他的好处。那么他到底是怎么制作的呢。首先我们找一张自己喜欢的图片或者自己喜欢的人物等。然后创建一个画布。把他放进去。接着使用钢笔工具（P）钢笔工具的作用是非常强大的，也可以使用其他工具，把他进行描边绘画。等把整个人物都画出来后这时右边就会出现一大堆你已经画好的图稿，

接着使用直接选择工具（A）然后把他选中，按一下快捷键ALT+Ctrl+X（实时上色）。或者可以到上面的导航条有个对象点击下面就有个实时上色的工具。然后按一下实时上色工具（K）或者在左边导航可以找到一个上色工具的。然后进行填充颜色即可把自己喜欢的图片画出来可以保存为图片。

制作ICON



图1

ICON是什么呢。ICON就是一种图标的简称，手机ICON阿，淘宝上的一些小图标的ICON啊。下面这个是我自己设计的一个手机ICON的图标。他是用猴子的形状进行绘画制图的一个ICON。

首先呢要怎么制作一个ICON。看你个人的思想是想要做一些独特的还有一些偏大众化的呢。看你个人设计。按照你自己喜欢的风格。设计出一个属于自己的ICON。

我设计的这个ICON刚开始的时候是由一个动画的猴子绘图出来的。紧接着把他设计成为手机的ICON图标。让他适合手机模式下的风格。首先可以先把这个猴子制作出来。接着在这个猴子身上填充上他的颜色。做这个ICON的时候首先把以人物为主的猴子进行制作他的图画。我用的是钢笔工具把他描边然后进行颜色填充。给他一个实时上色，然后把他们都放在一个圆角边框里面。给他里面设计出手机的应用相关的东西。让他能更形象的表现出在手机模式里面的应用程序。结合自己的方法。使用更洁净的方法让他更方便更快捷的设计出自己的ICON。

快速制作LOGO



图1   				图2								图3

怎么快速的制作一个LOGO呢？

下面有个方法可以快速的编辑制作一个LOGO，首先我们可以先把自己喜欢的图片放在AI一个创建好的A4纸里面。接着选中整个图片然后属性下面就会出现（图2）图像描摹的这个东西。选中他然后黑白灰阶然后点击扩展，或者可以直接在上面导航条有一个对象，下面有一个功能就是编组的功能可以点击他。然后把他全部选中点击右键有个取消编组。然后在点击旁边的空白把他的模块拉出来。里面的熊猫就成了一个图形。然后可以给他进行颜色的上色。把他的眼睛给弄上。使他跟（图1）原图的模样一样。这个就是快速制作一个LOGO的方法。不过快速制作跟原图上的差异还是有点区别的。所以建议还是老老实实用钢笔等工具。使他更加的完美的绘画出来。

% Prepare the resizable panels    
oldWarn = warning('off','MATLAB:hg:PossibleDeprecatedJavaSetHGProperty');     
hMainPanel = uipanel('Units','norm', 'Position',[0,0,1,.78], 'BorderType','none', 'Background','w');     
[hLeftPanel, hRightPanel, hDivider] = uisplitpane(hMainPanel, 'DividerColor',.95*[1,1,1]); %#ok<NASGU>     
[hLeftBottomPanel,  hLeftTopPanel,  hLeftDivider]  = uisplitpane(hLeftPanel,  'Orientation','Vertical'); %#ok<NASGU>     
[hRightBottomPanel, hRightTopPanel, hRightDivider] = uisplitpane(hRightPanel, 'Orientation','Vertical'); %#ok<NASGU>     
warning(oldWarn);     

本人终于写了第一篇博客
因毕业设计画图需要，用MATLAB写了一个自动画雷达图的程序，可以画两种雷达图：多边形风格和圆风格的雷达图，有需要的朋友可以参考。
一、多边形风格雷达图

画图的原理是，先一条一条画直线，然后再标注文字，然后填充图形。画直线用plot函数，标文字用text函数，填充图形用fill函数。这里有几个小技巧：
后画的内容会遮挡先画的内容，由于直线不便调透明， 所以先画直线再写字。
使用默认的对齐方式时，文字有时候会重叠在图上，不美观。所以需要根据文字的位置来设置合适的对其方式。
使用axes equal使横纵坐标相同，可以更方便地计算坐标。可以把图像中心定义为0,0点，然后用极坐标的形式去确定画图坐标。
为了使图窗大小正好是雷达图的大小，防止有些文字显示在图窗外面，需要读取各文字的extent属性，确定他们的坐标，然后调整绘图大小使得画图区足够容纳他们。
画图函数整合成draw_radar(data,lim,prefer_range,labels)函数，data是要画图的数据（根据数据的个数来确定雷达图的轴数），lim是各指标画图上下限范围，prefer_range是各指标参考上下限范围，labels是坐标轴名称。
function draw_radar(data,lim,prefer_range,labels)
    n=length(data);
    adj_data=zeros(n,1);
    point=zeros(n,2);
    adj_preferl=zeros(n,1);
    preferl_point=zeros(n,2);
    adj_preferu=zeros(n,1);
    preferu_point=zeros(n,2);
    
    set(gca,'units','normal','pos',[0 0 1 1]);
    axis off
    axis equal
    hold on
    theta_last=pi/2;
    for i=1:n
        theta=2*pi/n*i+pi/2;
        plot([0,500*cos(theta)],[0,500*sin(theta)],'k-','linewidth',2);
        for j=1:5
           plot([j*100*cos(theta_last),j*100*cos(theta)],[j*100*sin(theta_last),j*100*sin(theta)],'--','linewidth',0.75,'color',[0.5,0.5,0.5]);
        end
        
        theta_last=theta;
        if data(i)<lim(i,1)
            adj_data(i)=0;
        elseif data(i)>lim(i,2)
            adj_data(i)=500;
        else
            adj_data(i)=(data(i)-lim(i,1))/(lim(i,2)-lim(i,1))*500;
        end
        point(i,1:2)=[adj_data(i)*cos(theta);adj_data(i)*sin(theta)];
        adj_preferl(i)=(prefer_range(i,1)-lim(i,1))/(lim(i,2)-lim(i,1))*500;
        preferl_point(i,1:2)=[adj_preferl(i)*cos(theta);adj_preferl(i)*sin(theta)];
        adj_preferu(i)=(prefer_range(i,2)-lim(i,1))/(lim(i,2)-lim(i,1))*500;
        preferu_point(i,1:2)=[adj_preferu(i)*cos(theta);adj_preferu(i)*sin(theta)];
        text_around(510*cos(theta),510*sin(theta),labels{i},theta);
    end
    
    plot([preferl_point(:,1);preferl_point(1,1)],[preferl_point(:,2);preferl_point(1,2)],'b-','linewidth',1.5);
    plot([preferu_point(:,1);preferu_point(1,1)],[preferu_point(:,2);preferu_point(1,2)],'r-','linewidth',1.5);
    for i=1:n
        theta=2*pi/n*i+pi/2;
        for j=1:5
            text_around(j*100*cos(theta),j*100*sin(theta),num2str(lim(i,1)+(lim(i,2)-lim(i,1))/5*j),theta+pi/2,7);
        end
    end
    plot([point(:,1);point(1,1)],[point(:,2);point(1,2)],'k-','linewidth',0.2);
    fill(point(:,1),point(:,2),[0.9 0.9 0.7])
    alpha(0.5);
    texts=findobj(gca,'Type','Text');
    minx=-300;
    maxx=300;
    miny=-300;
    maxy=300;
    for i=1:length(texts)
        rect=get(texts(i),'Extent');
        x=rect(1);
        y=rect(2);
        dx=rect(3);
        dy=rect(4);
        if x<minx
            minx=x;
        elseif x+dx>maxx
            maxx=x+dx;
        end
        if y<miny
            miny=y;
        elseif y+dy>maxy
            maxy=y+dy;
        end
    end
    axis([minx-50,maxx+50,miny-20,maxy+20]);
end

function text_around(x,y,txt,theta,fontsize)
    if nargin==4
        fontsize=10;
    end
    section=mod(theta+pi/12,2*pi);
    if section>pi+pi/6
        %上对齐
        if section>1.5*pi+pi/6
            %左对齐
            text(x,y,txt,'VerticalAlignment','cap','HorizontalAlignment','left','Fontsize',fontsize);
        elseif section>1.5*pi
            %中对齐
            text(x,y,txt,'VerticalAlignment','cap','HorizontalAlignment','center','Fontsize',fontsize);
        else
            %右对齐
            text(x,y,txt,'VerticalAlignment','cap','HorizontalAlignment','right','Fontsize',fontsize);
        end
    elseif section>pi
        %中、右对齐
        text(x,y,txt,'VerticalAlignment','middle','HorizontalAlignment','right','Fontsize',fontsize);
    elseif section>pi/6
        %下对齐
        if section>0.5*pi+pi/6
            %右对齐
            text(x,y,txt,'VerticalAlignment','bottom','HorizontalAlignment','right','Fontsize',fontsize);
        elseif section>0.5*pi
            %中对齐
            text(x,y,txt,'VerticalAlignment','bottom','HorizontalAlignment','center','Fontsize',fontsize);
        else
            %左对齐
            text(x,y,txt,'VerticalAlignment','bottom','HorizontalAlignment','left','Fontsize',fontsize);
        end
    else
        %中、左对齐
        text(x,y,txt,'VerticalAlignment','middle','HorizontalAlignment','left','Fontsize',fontsize);
    end
end
函数调用的例子：
prefer=[4,7;20,50;85,95;75,85;1.2,2.5;5,6];
limit=[2,10;10,70;70,110;65,95;0.5,4;3,9];
clf;
draw_radar([6,35,96,70,2,5],limit,prefer,...
    {'指标1/s','指标2/s','指标3/℃','指标4/℃','指标5/(g/s)','指标6/%'});
二、圆形风格雷达图
鉴于导师不太喜欢这种多边形的风格，又画了一种圆形风格的雷达图。当各指标都相等时，图像是一个完美的圆，否则会是一个凹凸不平的土豆（感觉比较丑，暂时没想到更好的办法，各位有更好的思路请留言~）。

画图的原理和多边形图基本相同，但有两处不太一样：
为了让上下限范围变成一个圆，需要计算得到各坐标轴的刻度。
数据曲线采用三次样条插值来做。具体来说，是以0~2π为x，以数据点为y，进行插值。然后再将(x,y)换算成极坐标画在图上。为了使得插值曲线首尾能平滑连接，使用周期性边界条件来求解插值曲线。
画图函数整合成draw_radar_circle(data,prefer_range,labels)函数，data是要画图的数据（根据数据的个数来确定雷达图的轴数），prefer_range是各指标参考上下限范围，labels是坐标轴名称。
function draw_radar_circle(data,prefer_range,labels)
    n=length(data);
    lim=zeros(n,2);
    for j=1:n
        lim(j,1)=prefer_range(j,1)-(prefer_range(j,2)-prefer_range(j,1));
        lim(j,2)=prefer_range(j,2)+(prefer_range(j,2)-prefer_range(j,1));
    end
    adj_data=zeros(n,1);
    adj_preferl=zeros(n,1);
    preferl_point=zeros(n,2);
    adj_preferu=zeros(n,1);
    preferu_point=zeros(n,2);
    
    set(gca,'units','normal','pos',[0 0 1 1]);
    axis off
    axis equal
    hold on
    for i=1:5
        draw_circle(0,0,i*100,'--',[0.5,0.5,0.5],0.75);
    end
    for i=1:n
        theta=2*pi/n*i+pi/2;
        plot([0,500*cos(theta)],[0,500*sin(theta)],'k-','linewidth',2);
        if data(i)<lim(i,1)
            adj_data(i)=0;
        elseif data(i)>lim(i,2)
            adj_data(i)=500;
        else
            adj_data(i)=(data(i)-lim(i,1))/(lim(i,2)-lim(i,1))*500;
        end
        adj_preferl(i)=(prefer_range(i,1)-lim(i,1))/(lim(i,2)-lim(i,1))*500;
        preferl_point(i,1:2)=[adj_preferl(i)*cos(theta);adj_preferl(i)*sin(theta)];
        adj_preferu(i)=(prefer_range(i,2)-lim(i,1))/(lim(i,2)-lim(i,1))*500;
        preferu_point(i,1:2)=[adj_preferu(i)*cos(theta);adj_preferu(i)*sin(theta)];
        text_around(510*cos(theta),510*sin(theta),labels{i},theta);
    end
    draw_circle(0,0,500/3,'-',[0.2,0.2,0.9],1.5);
    draw_circle(0,0,500/3*2,'-',[0.9,0.2,0.2],1.5);
    for i=1:n
        theta=2*pi/n*i+pi/2;
        for j=1:5
            text_around(j*100*cos(theta),j*100*sin(theta),num2str(lim(i,1)+(lim(i,2)-lim(i,1))/5*j),theta+pi/2,7);
        end
    end
    y=[adj_data;adj_data(1)];
    x=[2*pi/n*(1:n)'+pi/2;2*pi/n*(n+1)+pi/2];
    m=length(x)*2-1;
    x_2=zeros(m,1);
    y_2=zeros(m,1);
    for i=1:m
        if mod(i,2)==0
            x_2(i)=(x(i/2)+x(i/2+1))/2;
            y_2(i)=(y(i/2)+y(i/2+1))/2;
        else
            x_2(i)=x((i+1)/2);
            y_2(i)=y((i+1)/2);
        end
    end
    xx=linspace(x_2(1),x_2(end),100);  
    yy=spline_period(x_2,y_2,xx);
    point=zeros(length(yy),2);
    for i=1:length(point)
        point(i,1:2)=[yy(i)*cos(xx(i));yy(i)*sin(xx(i))];
    end
    fill(point(:,1),point(:,2),[0.9 0.9 0.7])
    alpha(0.5);
    texts=findobj(gca,'Type','Text');
    minx=-500;
    maxx=500;
    miny=-500;
    maxy=500;
    for i=1:length(texts)
        rect=get(texts(i),'Extent');
        x=rect(1);
        y=rect(2);
        dx=rect(3);
        dy=rect(4);
        if x<minx
            minx=x;
        elseif x+dx>maxx
            maxx=x+dx;
        end
        if y<miny
            miny=y;
        elseif y+dy>maxy
            maxy=y+dy;
        end
    end
    axis([minx-50,maxx+50,miny-20,maxy+20]);
end

function [] = draw_circle(x,y,r,line_type,color,linewidth)  
    theta=0:0.01:2*pi;  
    circlex=x+r*cos(theta);  
    circley=y+r*sin(theta);  
    plot(circlex,circley,line_type,'color',color,'linewidth',linewidth);  
end  

function yy=spline_period(x,y,xx)
    n=length(x)-1; %n与书上的定义相同
    h=zeros(n,1);
    lambda=zeros(n,1);
    mu=zeros(n,1);
    g=zeros(n,1);
    for k=1:n        
        h(k)=x(k+1)-x(k);   %h(i)与书上的标号相同
    end
    for k=1:(n-1)                  %计算μ和λ
       mu(k)=h(k)/(h(k+1)+h(k));
       lambda(k)=1-mu(k);
       g(k)=6/(h(1+k)+h(k))*((y(k+2)-y(k+1))/h(k+1)-(y(k+1)-y(k))/h(k));
    end
    mu(n)=h(n)/(h(1)+h(n));
    lambda(n)=1-mu(n);
    g(n)=6/(h(1)+h(n))*((y(2)-y(1))/h(1)-(y(n+1)-y(n))/h(n));
    A=zeros(n,n);
    for k=1:(n-1)
        A(k,k)=2;
        A(k,k+1)=lambda(k);
        A(k+1,k)=mu(k+1);
    end
    A(n,n)=2;
    A(1,n)=mu(1);
    A(n,1)=lambda(n);
    [L,U,p] = lu(A,'vector');
    M = U\(L\(g(p,:)));
    M=[M(n);M];  %M0,M1,M2..Mn
    yy=zeros(size(xx));
    k=2;
    for i=1:length(xx)
        if xx(i)>x(k) && k<length(x)
            k=k+1;
        end
        %[x(k-1),x(k)]
        yy(i)=M(k-1)*((x(k)-xx(i))^3)/6/h(k-1)+...
            M(k)*((xx(i)-x(k-1))^3)/6/h(k-1)+...
            (y(k-1)-M(k-1)/6*h(k-1)*h(k-1))*(x(k)-xx(i))/h(k-1)+...
            (y(k)-M(k)/6*h(k-1)*h(k-1))*(xx(i)-x(k-1))/h(k-1);
    end
end

function text_around(x,y,txt,theta,fontsize)
    if nargin==4
        fontsize=10;
    end
    section=mod(theta+pi/12,2*pi);
    if section>pi+pi/6
        %上对齐
        if section>1.5*pi+pi/6
            %左对齐
            text(x,y,txt,'VerticalAlignment','cap','HorizontalAlignment','left','Fontsize',fontsize);
        elseif section>1.5*pi
            %中对齐
            text(x,y,txt,'VerticalAlignment','cap','HorizontalAlignment','center','Fontsize',fontsize);
        else
            %右对齐
            text(x,y,txt,'VerticalAlignment','cap','HorizontalAlignment','right','Fontsize',fontsize);
        end
    elseif section>pi
        %中、右对齐
        text(x,y,txt,'VerticalAlignment','middle','HorizontalAlignment','right','Fontsize',fontsize);
    elseif section>pi/6
        %下对齐
        if section>0.5*pi+pi/6
            %右对齐
            text(x,y,txt,'VerticalAlignment','bottom','HorizontalAlignment','right','Fontsize',fontsize);
        elseif section>0.5*pi
            %中对齐
            text(x,y,txt,'VerticalAlignment','bottom','HorizontalAlignment','center','Fontsize',fontsize);
        else
            %左对齐
            text(x,y,txt,'VerticalAlignment','bottom','HorizontalAlignment','left','Fontsize',fontsize);
        end
    else
        %中、左对齐
        text(x,y,txt,'VerticalAlignment','middle','HorizontalAlignment','left','Fontsize',fontsize);
    end
end
函数调用的例子：
prefer=[4,7;20,50;85,95;75,85;1.2,2.5;5,6];
clf;
draw_radar_circle([6,35,96,70,2,5],prefer,...
    {'指标1/s','指标2/s','指标3/℃','指标4/℃','指标5/(g/s)','指标6/%'});
三、其他轴数时的效果
当图像为5个坐标轴时，效果如下，用一个完美的雷达图来收尾。
多边形风格：

圆风格：