温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(28867)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_085068',
blogTitle:'（matlab)plot画图的颜色线型',
blogAbstract:'（matlab)plot画图的颜色线型 &&& &&
y&&&&&&&&&黄色&&&&&&&&&&&·&&&&&&&&&&&&&点线&&&&
m&&&&&&&&&粉红&&&&&&&&&&&○&&&&&&&',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:6,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}使用html5 Canvas绘制线条(直线、折线等)
注意：本文属于《》系列文章中的一部分。如果你是html5初学者，仅仅阅读本文，可能无法较深入的理解canvas，甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有&()&者为方法)如下： 属性或方法基本描述strokeStyle用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个对象或者对象globalAlpha定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。lineWidth定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。lineCap指定线条两端的线帽如何绘制。合法的值是 &butt&、&round&和&square&。默认值是&butt&。你可以点击这里，以帮助你更好地理解lineCap。beginPath()开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。moveTo(int x, int y)移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点lineTo(int x, int y)使用直线连接当前端点和指定的坐标点(x,y)stroke(int x, int y)沿着绘制路径的坐标点顺序绘制直线closePath()如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。在Canvas的图形绘制过程中，几乎都是先按照一定顺序先定下几个坐标点，也就是所谓的绘制路径，然后再根据我们的需要将这些坐标点用指定的方式连接起来，就形成了我们所需要的图形。当我们了解了CanvasRenderingContext2D对象的上述API后，那么绘制线条就显得非常简单了。使用canvas绘制基本的直线现在，我们就使用canvas来绘制最基本的直线。&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&HTML5 Canvas绘制线条入门示例&/title&
&!-- 添加canvas标签，并加上红色边框以便于在页面上查看 --&
&canvas id=&myCanvas& width=&400px& height=&300px& style=&border: 1&&
您的浏览器不支持canvas标签。
&script type=&text/javascript&&
//获取Canvas对象(画布)
var canvas = document.getElementById(&myCanvas&);
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext(&2d&);
//注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
//开始一个新的绘制路径
ctx.beginPath();
//定义直线的起点坐标为(10,10)
ctx.moveTo(10, 10);
//定义直线的终点坐标为(50,10)
ctx.lineTo(50, 10);
//沿着坐标点顺序的路径绘制直线
ctx.stroke();
//关闭当前的绘制路径
ctx.closePath();
&/html&显示效果如下：使用canvas绘制最基本的直线使用canvas绘制带颜色的直线大家都知道，在现实世界中，画笔也是多种多样的，并且具有各种不同的颜色。同样的，Canvas的画笔CanvasRenderingContext2D对象也同样可以具有你所需要的各种颜色。在上面的代码示例中，我们没有指定颜色的话，Canvas的画笔就默认为最常见的黑色。现在我们再次使用Canvas的画笔绘制一条蓝色的直线(基于页面简洁考虑，下面只给出关键的JavaScript代码，请同时参考上面完整的代码示例)。&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&HTML5 Canvas绘制线条入门示例&/title&
&!-- 添加canvas标签，并加上红色边框以便于在页面上查看 --&
&canvas id=&myCanvas& width=&400px& height=&300px& style=&border: 1&&
您的浏览器不支持canvas标签。
&script type=&text/javascript&&
//获取Canvas对象(画布)
var canvas = document.getElementById(&myCanvas&);
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext(&2d&);
//开始一个新的绘制路径
ctx.beginPath();
//定义直线的起点坐标为(10,10)
ctx.moveTo(10, 10);
//定义直线的终点坐标为(50,10)
ctx.lineTo(50, 10);
//沿着坐标点顺序的路径绘制直线
ctx.stroke();
//关闭当前的绘制路径
ctx.closePath();
//绘制一条带颜色的直线
ctx.moveTo(10, 30);
ctx.lineTo(50, 30);
//支持css颜色值的各种表现形式，例如：&blue&、&#0000ff&、&#00f&、&rgb(0,0,255)&、&rgba(0,0,255,1)&
//颜色等各种设置，必须在最终的绘制函数stroke()之前调用
ctx.strokeStyle = &blue&;
ctx.stroke();
//关闭当前的绘制路径
ctx.closePath();
&/html&对应的显示效果如下图：使用canvas绘制的蓝色直线使用canvas绘制基本的折线当我们掌握了Canvas绘制直线之后，绘制折线等其他形式的线条就简单多了。我们只需要多绘制几个路径中间点，并依次将它们连接起来即可。&script type=&text/javascript&&
//获取Canvas对象(画布)
var canvas = document.getElementById(&myCanvas&);
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext(&2d&);
//开始一个新的绘制路径
ctx.beginPath();
//设置线条颜色为蓝色
ctx.strokeStyle = &blue&;
//设置路径起点坐标
ctx.moveTo(20, 50);
//定义中间点坐标1
ctx.lineTo(60, 50);
//定义中间点坐标2
ctx.lineTo(60, 90);
//定义中间点坐标3(这是最后一个中间点，也就是终点)
ctx.lineTo(100, 90);
//按照绘制路径顺序连接各个坐标点
ctx.stroke();
//关闭绘制路径
ctx.closePath();
&/script&对应的显示效果如下图：使用Canvas绘制的折线效果掌握上述内容后，相信大家对使用Canvas绘制线条有一些基本的了解了吧。由于对线条的宽度、透明度等控制只是设置单个属性即可，请参考上面的相关API，这里就不再赘述了。强烈注意：在绘制图形路径时，一定要先调用beginPath()。beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例如上面示例的两条直线)，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。此外，对于closePath()方法，初学者一定要稍加注意，尤其是上面API表格中closePath()方法描述中的红色文字。在上面绘制折线的代码示例中，我们先调用了stroke()，再调用了closePath()。其实在调用stroke()方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用closePath()方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的closePath()是可有可无的，不过为了保持良好的习惯，还是建议写上)。如果我们交换一下stroke()和closePath()的调用顺序，则情况完全不一样了。由于closePath()先调用，此时绘制路径并没有关闭，那么closePath()将会用直线连接当前端点和起始端点。交换stroke()和closePath()调用顺序后的示例代码如下：&script type=&text/javascript&&
//获取Canvas对象(画布)
var canvas = document.getElementById(&myCanvas&);
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext(&2d&);
//开始一个新的绘制路径
ctx.beginPath();
//设置线条颜色为蓝色
ctx.strokeStyle = &blue&;
//设置路径起点坐标
ctx.moveTo(20, 50);
//定义中间点坐标1
ctx.lineTo(60, 50);
//定义中间点坐标2
ctx.lineTo(60, 90);
//定义中间点坐标3(这是最后一个中间点，也就是终点)
ctx.lineTo(100, 90);
//先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
ctx.closePath();
//最后，按照绘制路径顺序连接各个坐标点
ctx.stroke();
&/script&交换调用顺序后，对应的显示效果如下：交换调用顺序后的canvas绘制效果
我们认为：
用户的主要目的，是为了获取有用的信息，而不是来点击广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：只有给用户带来价值，用户才会给我们以回报。
CodePlayer技术交流群1：
帮朋友打一个硬广告：
P2P网贷系统(Java版本) 新年低价大促销，多年P2P技术积累，系统功能完善（可支持资金存管），架构稳定灵活、性能优异、二次开发快速简单。
另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。
外行看热闹，内行看门道。可以自信地认为，在系统设计上，比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构，货比三家，再决定是否购买。
也可推荐他人购买，一旦完全成交，推荐人可获得实际售价 20% 的返现。
有意向者，详情请
联系，工作时间立即回复。帐号:密码:下次自动登录{url:/nForum/slist.json?uid=guest&root=list-section}{url:/nForum/nlist.json?uid=guest&root=list-section}
贴数:4&分页:doglovecat发信人: dypang (doglovecat), 信区: LinuxApp
标&&题: gnuplot问题：如何画几条线型不同但颜色相同的线？
发信站: 水木社区 (Wed Jul 31 00:59:09 2013), 站内 && 使尽儿找也没找到解决方案 && 谢谢！ &&&& -- && ※ 来源:·水木社区 ·[FROM: 219.224.172.*]
NULL发信人: heracules (我愿拱手河山讨你欢), 信区: LinuxApp
标&&题: Re: gnuplot问题：如何画几条线型不同但颜色相同的线？
发信站: 水木社区 (Wed Jul 31 08:09:40 2013), 站内 && lt lc
【 在 dypang (doglovecat) 的大作中提到: 】
: 使尽儿找也没找到解决方案
把我最后的爱留给你 &&&& ※ 来源:·水木社区 newsmth.net·[FROM: 122.198.133.*]
doglovecat发信人: dypang (doglovecat), 信区: LinuxApp
标&&题: Re: gnuplot问题：如何画几条线型不同但颜色相同的线？
发信站: 水木社区 (Wed Jul 31 18:14:29 2013), 站内 && plot sin(x) lt 1 lc 1, cos(x) lt 2 lc 2 && 出来的是两条红色的实线，我想要的是，比如一条实线，一条虚线…… && 【 在 heracules (我愿拱手河山讨你欢) 的大作中提到: 】
&& -- && ※ 来源:·水木社区 ·[FROM: 219.224.172.*]
NULL发信人: heracules (我愿拱手河山讨你欢), 信区: LinuxApp
标&&题: Re: gnuplot问题：如何画几条线型不同但颜色相同的线？
发信站: 水木社区 (Wed Jul 31 18:26:30 2013), 站内 && set term xxx dashed
【 在 dypang (doglovecat) 的大作中提到: 】
: plot sin(x) lt 1 lc 1, cos(x) lt 2 lc 2
: 出来的是两条红色的实线，我想要的是，比如一条实线，一条虚线……
把我最后的爱留给你 &&&& ※ 来源:·水木社区 newsmth.net·[FROM: 122.198.133.*]
文章数:4&分页:matlab画图中线型及颜色设置_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
matlab画图中线型及颜色设置
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩9页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢}