h5 Canvas线段的绘制

た入场券 2022-03-16 09:46 308阅读 0赞

在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]  
通常创建线条的方法是moveTo()和lineTo()方法,但是要使线性路径出现在canvas之中,我们必须使用上面提到的stroke()方法

##### 创建线条 #####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1][]

使用strokeStyle属性设置线性路径的颜色,使用lineWidth设置线性路径的宽度为2像素,通过beginPath开始一条新路径,将新路径的起点移动到(30, 30)坐标处,将新路径的终点绘制到坐标点(230, 30)、(230, 200),最后在使用stroke()使得路径可见.

##### 线段的颜色和宽度 #####

通过上面的简单实例,我们能够知道线段样式的改变能够通过lineWidth、strokeStyle属性进行控制

###### 宽度 ######

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    
    function drawScreen() {
      context.strokeStyle = '#e6c7ff';
      context.lineWidth = 6; // 设置线段宽度
      context.beginPath(); // 开始点
      context.moveTo(30, 30);
      context.lineTo(230, 30);
      context.lineTo(230, 200);
      context.stroke(); // 进行绘制外边框
    
      context.beginPath();
      context.lineWidth = 20; // 设置线段宽度
      context.moveTo(300, 30);
      context.lineTo(500, 30);
      context.lineTo(500, 200);
      context.stroke(); // 进行绘制外边框
    
      context.beginPath();
      context.lineWidth = 1; // 设置线段宽度
      context.moveTo(30, 230);
      context.lineTo(230, 230);
      context.lineTo(230, 530);
      context.stroke(); // 进行绘制外边框
    }
    
    drawScreen();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2][]

我们分别通过context.lineWidth = 6、context.lineWidth = 20、context.lineWidth = 1设置了路径的宽度

###### 颜色 ######

对于颜色,我们也能够按照属性strokeStyle进行设置

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    
    function drawScreen() {
      context.strokeStyle = '#e6c7ff';
      context.lineWidth = 6; // 设置线段宽度
      context.beginPath(); // 开始点
      context.moveTo(30, 30);
      context.lineTo(230, 30);
      context.lineTo(230, 200);
      context.stroke(); // 进行绘制外边框
    
    
      context.beginPath();
      context.strokeStyle = '#e6c';
      context.lineWidth = 20; // 设置线段宽度
      context.moveTo(300, 30);
      context.lineTo(500, 30);
      context.lineTo(500, 200);
      context.stroke(); // 进行绘制外边框
    
      context.beginPath();
      context.strokeStyle = '#0ff';
      context.lineWidth = 1; // 设置线段宽度
      context.moveTo(30, 230);
      context.lineTo(230, 230);
      context.lineTo(230, 530);
      context.stroke(); // 进行绘制外边框
    }
    
    drawScreen();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 3][]

strokeStyle主要用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 4]

也就是说，我们也可以绘制渐变色的线段：

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    
    function drawScreen() {
      // 创建一个表示线性颜色渐变的CanvasGradient对象，
      // 并设置该对象的作用区域就是线段所在的区域
      context.beginPath();
      var canvasGradient = context.createLinearGradient(50, 50, 250, 50);
      // 在offset为0的位置(即起点位置)添加一个蓝色的渐变
      canvasGradient.addColorStop(0, "blue");
      // 在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变
      canvasGradient.addColorStop(0.2, "green");
      // 在offset为0.8的位置(即终点位置)添加一个红色的渐变
      canvasGradient.addColorStop(0.8, "yellow");
      // 在offset为1的位置(即终点位置)添加一个红色的渐变
      canvasGradient.addColorStop(1, "red");
      // 将strokeStyle的属性值设为该CanvasGradient对象
      context.strokeStyle = canvasGradient;
      context.lineWidth = 100;
      context.moveTo(50, 20);
      context.lineTo(350, 100);
      context.stroke();
    
      context.beginPath();
      canvasGradient = context.createLinearGradient(50, 50, 250, 50);
      // 在offset为0的位置(即起点位置)添加一个蓝色的渐变
      canvasGradient.addColorStop(0, "blue");
      // 在offset为0.6的位置(线段左起20%的位置)添加一个绿色的渐变
      canvasGradient.addColorStop(0.6, "green");
      // 在offset为0.8的位置(即终点位置)添加一个红色的渐变
      canvasGradient.addColorStop(0.8, "yellow");
      // 在offset为1的位置(即终点位置)添加一个红色的渐变
      canvasGradient.addColorStop(1, "red");
      // 将strokeStyle的属性值设为该CanvasGradient对象
      context.strokeStyle = canvasGradient;
      context.lineWidth = 5;
      context.moveTo(50, 220);
      context.lineTo(350, 320);
      context.stroke();
    }
    drawScreen();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 5][]

第一张我们是按照宽度为100像素的效果,后面一张是按照像素为5的效果,我们createLinearGradient进行了颜色渐变处理.同样我们也能够使用放射性渐变效果createRadialGradient产生strokeStyle.

##### 线段与像素边界 #####

这是绘制线段的一个小细节。在说这个细节之前，咱们先来看一个小示例，就是绘制两条简单的直线。

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    
    function drawScreen() {
      context.strokeStyle = 'red';
      context.lineWidth = 1;
      context.beginPath();
      context.moveTo(50, 50);
      context.lineTo(350, 50);
      context.stroke();
      context.beginPath();
      context.moveTo(50.5, 100.5);
      context.lineTo(350.5, 100.5);
      context.closePath();
      context.stroke();
    }
    drawScreen();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 6][]

虽然我们在代码中设置了lineWidth的值为1，同样的值，但绘制出来的结果却不一样，第一条的宽度变成了2，而第二条的宽度是1。  
这就是我们接下来要说的线段与像素边界。如果你在某2个像素的边界处绘制一条1像素宽的线段，那么该线段实际上会占据2个像素的宽度，如果在像素边界处绘制一条1像素宽的垂直线段，那么Canvas的绘图环境对象会试着将半个像素画在边界中线的右边，将另外半个像素画在边界中线的左边。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 7]  
然而，在一个整像素的范围内绘制半个像素宽的线段是不可能的，所以左右两个方向上的半像素都被扩展为1个像素。正如上图中左图，本来我们想要将线段绘制在深灰色的区域内，但实际上浏览器却将其延伸绘制到整个灰色的范围内。  
另一方面，我们来看看如果将线段绘制在某2个像素点之间的那个像素中，效果就如上图中右图。这条垂直线段绘制在两个像素之间，这样的话，中线左右两端的那半个像素就不会再延伸了，它们合半起来恰好占据1像素的宽度。所以说，如果绘制一条真正1像素宽的线段，你必须将该线段绘制在某两个像素之间的那个像素中，而不能将它绘制在两个像素的交界处。

##### 绘制网格 #####

由上面知识,我们去实现一个网格的制作.

height="500" width="100%" scrolling="no" title="h5CanvasGrid" src="//codepen.io/suwu150/embed/PLqoXG/?height=265&theme-id=0&default-tab=js,result" allowfullscreen="true"> See the Pen [h5CanvasGrid][] by suwu150 ( [@suwu150][suwu150]) on [CodePen][].

这个网格中线段就是绘制在两个像素之间的像素上面,而且绘制出来的像素仅有0.5像素宽.

##### 总结 #####

1.moveTo(x,y)、lineTo(x,y)和stroke()方法的使用,通过moveTo、lineTo确定线段,通过stroke使可见  
2.线段宽度与颜色的设置,strokeStyle、lineWidth的使用,能够进行创建颜色渐变线条和放射渐变线条  
3.线段与像素边界

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 8][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]: /images/20220316/d2c2714de3a54852ae8260fca0dd4f21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1]: /images/20220316/fd4cd8c0953041469e12a22cd777fd10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2]: /images/20220316/06240a06dd644fdd8ee7c0b20c0871eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 3]: /images/20220316/e969ca3ccd8c4eb8b980487d5bf2a9f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 4]: /images/20220316/0a571ea71d1f4137815dd337dc0a9288.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 5]: /images/20220316/5154a22d856e400e90fd61cebb8b7a14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 6]: /images/20220316/e118697f62334a659fd6bd1bede86560.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 7]: /images/20220316/43d7caf152d04f97a35ec88b64f7899a.png
[h5CanvasGrid]: https://codepen.io/suwu150/pen/PLqoXG/
[suwu150]: https://codepen.io/suwu150
[CodePen]: https://codepen.io
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 8]: /images/20220316/030bb7f1632442f4a5bd5de1466917ce.png