h5 Canvas线段的绘制 た 入场券 2022-03-16 09:46 230阅读 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()方法 ##### 创建线条 ##### const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); function drawScreen() { context.strokeStyle = '#e6c7ff'; context.lineWidth = 2; // 设置线段宽度 context.beginPath(); // 开始点 context.moveTo(30, 30); context.lineTo(230, 30); context.lineTo(230, 200); context.stroke(); // 进行绘制外边框 context.beginPath(); context.moveTo(300, 30); context.lineTo(500, 30); context.lineTo(500, 200); context.stroke(); // 进行绘制外边框 } drawScreen(); ![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
还没有评论,来说两句吧...