上文，写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)，本文主要是关于线条的样式设置

lineWidth: 设置线条的宽度，值是一个数值，如lineWidth = 5.

画3条不同宽度的线条：

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

         var oCanvas = document.querySelector("#canvas"),

             oGc = oCanvas.getContext('2d');

         oGc.beginPath();

         oGc.lineWidth = 5;

         oGc.strokeStyle = 'red';

         oGc.moveTo( 200, 100 );

         oGc.lineTo( 600, 100 );

         oGc.stroke();

         oGc.beginPath();

         oGc.lineWidth = 10;

         oGc.strokeStyle = 'orange';

         oGc.moveTo( 200, 300 );

         oGc.lineTo( 600, 300 );

         oGc.stroke();

         oGc.beginPath();

         oGc.lineWidth = 20;

         oGc.strokeStyle = '#09f';

         oGc.moveTo( 200, 500 );

         oGc.lineTo( 600, 500 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

     <canvas id="canvas" width="800" height="600"></canvas>

 </body>

lineWidth设置弧形的宽度：

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

         var oCanvas = document.querySelector("#canvas"),

             oGc = oCanvas.getContext('2d');

         oGc.lineWidth = 10;

         oGc.arc( 300, 300, 200, 0, 270 * Math.PI / 180, false );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

     <canvas id="canvas" width="800" height="600"></canvas>

 </body>

这段圆弧设置了lineWidth, 那么他的半径就等于lineWidth + 原来的半径

lineCap设置线条开始与结尾的线帽样式，有3个值

1，butt: 这是默认值，不加任何样式

2，round: 圆形

3，square: 正方形

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

         var oCanvas = document.querySelector("#canvas"),

             oGc = oCanvas.getContext('2d');

         oGc.lineWidth = 100;

         oGc.beginPath();

         oGc.strokeStyle = 'red';

         oGc.lineCap = 'butt';

         oGc.moveTo( 200, 100 );

         oGc.lineTo( 600, 100 );

         oGc.stroke();

         oGc.beginPath();

         oGc.strokeStyle = 'orange';

         oGc.lineCap = 'round';

         oGc.moveTo( 200, 300 );

         oGc.lineTo( 600, 300 );

         oGc.stroke();

         oGc.beginPath();

         oGc.strokeStyle = '#09f';

         oGc.lineCap = 'square';

         oGc.moveTo( 200, 500 );

         oGc.lineTo( 600, 500 );

         oGc.stroke();

         oGc.beginPath();

         oGc.lineWidth = 1;

         oGc.strokeStyle = '#ccc';

         oGc.moveTo( 200, 0 );

         oGc.lineTo( 200, oCanvas.height );

         oGc.stroke();

         oGc.beginPath();

         oGc.moveTo( 150, 0 );

         oGc.lineTo( 150, oCanvas.height );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

     <canvas id="canvas" width="800" height="600"></canvas>

 </body>

如果设置了线帽的样式( square, round )，线条就会加长，长出了多少？我在图中作了两条参考线，线条两边多出来的长度是线宽的一半。着这里就是 50，就是lineWidth=100的一半.

利用 lineWidth和lineCap属性写一个字母Z

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

         var oCanvas = document.querySelector("#canvas"),

             oGc = oCanvas.getContext('2d');

         oGc.lineWidth = 30;

         oGc.lineCap = 'round';

         oGc.moveTo( 100, 100 );

         oGc.lineTo( 300, 100 );

         oGc.lineTo( 100, 300 );

         oGc.lineTo( 300, 300 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

     <canvas id="canvas" width="800" height="600"></canvas>

 </body>

你会发现，只有两个地方有lineCap样式，线的开始点和结束点。线条的连接处并没有加上lineCap样式

canvas为我们提供了lineJoin方法，可以设置线的连接处的样式，有3个值:

miter: 默认值，尖角

round: 圆角

bevel: 斜角

 oGc.lineWidth = 30;

 oGc.lineCap = 'round';

 oGc.lineJoin = 'round';

 oGc.moveTo( 100, 100 );

 oGc.lineTo( 300, 100 );

 oGc.lineTo( 100, 300 );

 oGc.lineTo( 300, 300 );

 oGc.stroke();

加上lineJoin = 'round' 就会变成圆角效果:

miter效果：

bevel效果

画虚线：

我们之前用moveTo, lineTo画的都是实线，canvas为我们提供了setLineDash()方法，它可以用来画虚线:

用法：

cxt.setLineDash( 数组 )

参数中这个数组，是由实线和空白组合合成，如：

[ 20, 5 ]: 20px 实线，5px空白

[ 20, 5, 10, 5]: 20px实线，5px空白, 10px实线, 5px空白

重复拼凑组合而成的线型.

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

         var oCanvas = document.querySelector("#canvas"),

             oGc = oCanvas.getContext('2d');

         oGc.lineWidth = 5;

         oGc.strokeStyle = '#09f';

         oGc.beginPath();

         oGc.setLineDash( [ 10, 5 ] );

         oGc.moveTo( 100, 100 );

         oGc.lineTo( 600, 100 );

         oGc.stroke();

         oGc.beginPath();

         oGc.setLineDash( [ 20, 5, 10, 5 ] );

         oGc.moveTo( 100, 150 );

         oGc.lineTo( 600, 150 );

         oGc.stroke();

         oGc.beginPath();

         oGc.setLineDash( [ 40, 5, 20, 5, 10, 1 ] );

         oGc.moveTo( 100, 200 );

         oGc.lineTo( 600, 200 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

     <canvas id="canvas" width="800" height="600"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  2. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  3. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  4. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  5. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  6. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  7. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  8. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  9. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

  1. mysq建立索引的优缺点

    建立索引的优点及必要性: 第一.通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性: 第二.可以大大加快 数据的检索速度,这也是创建索引的最主要的原因: 第三.可以加速表和表之间的连接,特别是在 ...

  2. GHO2VMDK转换工具分享含VS2010源码

    平常经常用到虚拟机,每次从gho转换为vmdk时都要输入cmd代码,觉得麻烦,自己动手做了个gho2vmdk转换工具,集成ghost32.exe文件,可以一键转换,省时省事.运行时会将ghost32. ...

  3. CSS边框外的小三角形+阴影效果的实现。

    ...虽然是一个很小的问题,但其实还是挺实用的. 实现一个边框外的角. 用纯CSS来写. 一开始实现的效果是这个样子的. 但是这个效果没有办法给他附带阴影,所以换了一种写法.实现成了这个样子 想要实现 ...

  4. Django连接mysql数据库

    1.app中对应的models.py配置相关表结构信息 from django.db import models class Question(models.Model): question_text ...

  5. JVM（一） OpenJDK1.8源码在Ubuntu16.04下的编译

    笔者最近在学习周志明老师编写的<深入理解Java虚拟机>一书,书中第一章的实战部分就是"自己编译JDK",不过书中提到的是OpenJDK 7的编译.由于现在Java开发 ...

  6. jmeter后置处理器 JSON Extractor取多个变量值

    1.需要获取响应数据的请求右键添加-后置处理器-JSON Extractor 2.如果要获取json响应数据多个值时,设置的Variable names (后续引用变量值的变量名设置)与JSON Pa ...

  7. 从async await 报错Unexpected identifier 谈谈对上下文的理解

    原文首发地址: 先简单介绍下async await: async/await是ES6推出的异步处理方案,目的也很明确:更好的实现异步编程.   详细见阮大神 ES6入门 现在说说实践中遇到的问题:使用 ...

  8. HTML的基本标签及语法

    一.HTML基本标签head部分 HTML文档的基本结构 <!DOCTYPE html> <html> <head> <meta charset=" ...

  9. 201521123031《java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句 ...

  10. 201521123017 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 Q1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图)   Q2.面向对象设计(大作业1,非常重要) 2.1 将 ...