深入了解线型 Line styles：设置线样式的属性与样例

线条可不只是简单的连接工具，还是艺术和设计里的大腕儿。赶紧来学学怎么操控线条，让你的作品舞动得更漂亮！

lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value

线条的基础：理解像素与坐标的关系

注意！画布里的坐标和电脑屏幕上的像素可不是固定配对的，所以画横直直线挺费劲儿的。比如，左上角的那条线或者宽为奇数的线，看上去总有点倾斜，这就是路径定位闹的事儿。你可以想象画布就是网状的，每一小格都是像素点。为了让图形边缘看得清楚，必须让它刚好落在像素线上面。可惜，假如你画的线条是1.0，起点是(3,1)，终点是(3,5)，结果看上去就是像素化的马赛克，糊成一片。

function draw() {  
     var ctx = document.getElementById('canvas').getContext('2d');  
     for (var i = 0; i < 10; i++){  
       ctx.lineWidth = 1+i;  
       ctx.beginPath();  
       ctx.moveTo(5+i*14,5);  
       ctx.lineTo(5+i*14,140);  
       ctx.stroke();  
     }  
  }

线条的宽度：奇数与偶数的秘密

说到线条宽窄，单数和双数差别可大了！双数线条就是俩整数像素的距离，所以咱要把它们摆在像素的中心，才能保持不变形，不怕缩放。可单数线条就麻烦多了，容易翘边或者半像素露出来。因此画图时要特别注意线条的位置，务必让它正好贴着网格线，两边都不能有半个像素伸出。

线条的连接：miter与miterLimit的故事

线条可不只是孤单地挂在那儿，还能相互碰到对不？当两条线碰上时，如果直角设定正确的话，它们就会继续往外延伸去碰撞对方。但别慌张，这种伸展是有限制滴，这取决于”连接限制”或是miterLimit的设定。记住这条红线是不能乱踩的，要是交叉点离得太远，那连接效果可能就会变成斜角，跟你和朋友见面握手变点头差不多。

线条的渐变：颜色的魔术

function draw() {  
     var ctx = document.getElementById('canvas').getContext('2d');  
     var lineCap = ['butt','round','square'];  
      
     // Draw guides  
     ctx.strokeStyle = '#09f';  
     ctx.beginPath();  
     ctx.moveTo(10,10);  
     ctx.lineTo(140,10);  
     ctx.moveTo(10,140);  
     ctx.lineTo(140,140);  
     ctx.stroke();  
     
     // Draw lines  
     ctx.strokeStyle = 'black';  
     for (var i=0;i<lineCap.length;i++){  
       ctx.lineWidth = 15;  
       ctx.lineCap = lineCap[i];  
       ctx.beginPath();  
       ctx.moveTo(25+i*50,10);  
       ctx.lineTo(25+i*50,140);  
       ctx.stroke();  
     }  
   }

色彩线条可不止黑白两种，还有各种炫酷色彩！用渐变效果，线条可以瞬间变成另外一种颜色，就像变魔术一样。你想从哪个颜色开始变，或者变到哪种颜色，又或者同时出现反差极大的两个颜色，都没问题，绝对让人眼前一亮！比如，突然从白色变成绿色，真是惊喜连连！

线条的图案：重复的艺术

【注】除了渐变，还有个提高直线美的新招儿——用图案！把pattern直接扔到fillStyle或strokeStyle里，立马让线条好看起来。但得注意了，跟drawImage不一样，先把图案填满再用，不然图案形状会崩坏。跟画画一样，墙绘也得等底色干了才能上墙呢～

function draw() {  
      var ctx = document.getElementById('canvas').getContext('2d');  
      var lineJoin = ['round','bevel','miter'];  
      ctx.lineWidth = 10;  
      for (var i=0;i<lineJoin.length;i++){  
        ctx.lineJoin = lineJoin[i];  
        ctx.beginPath();  
        ctx.moveTo(-5,5+i*40);  
        ctx.lineTo(35,45+i*40);  
        ctx.lineTo(75,5+i*40);  
        ctx.lineTo(115,45+i*40);  
        ctx.lineTo(155,5+i*40);  
        ctx.stroke();  
     }  
   }

线条的缩放：变形的挑战

数字线条不仅要好看，还得栩栩如生才行。得缩放、变形成功，才能看着舒服。关键就在于看清像素网格与路径位置间的关系，别出问题。学这个，就像学会了变形金刚的魔法，不管怎么变也不变丑。

线条的最终呈现：从细节到整体

搞掂所有设置以后，美翻天了？别马虎喔，图案大小、连接方式、颜色过渡什么的，全都得小心翼翼。想象一下，这就像跳舞，每个小动作都重要，才能让人看得如痴如醉！

createLinearGradient(x1,y1,x2,y2)
createRadialGradient(x1,y1,r1,x2,y2,r2)

原来用数码技术玩艺术可以把线弄得像跳舞一样在画布上动起来！

var lineargradient = ctx.createLinearGradient(0,0,150,150);  
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);

哈喽！又来找你了！想用线条画啥最美？快来说说看~记得点赞转发这篇文章让更多人了解这么炫酷的小技巧！

addColorStop(position, color)