上文，写完弧度与贝塞尔曲线[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. redux源码解读

    react在做大型项目的时候,前端的数据一般会越来越复杂,状态的变化难以跟踪.无法预测,而redux可以很好的结合react使用,保证数据的单向流动,可以很好的管理整个项目的状态,但是具体来说,下面是 ...

  2. 题目1522：包含min函数的栈

    #include <iostream> #include <cstdio> #include <stack> using namespace std; int ma ...

  3. SQL分组查询

      把数据分成多个逻辑组,以便能对每个组的数据进行操作,对每个组进行聚集计算. 1.创建分组 分组是在SELECT语句的GROUP BY子句中建立的 例子:         SELECT vendId ...

  4. python进阶学习（四）

    在使用多线程之前,我们首页要理解什么是进程和线程. 什么是进程? 计算机程序只不过是磁盘中可执行的,二进制(或其它类型)的数据.它们只有在被读取到内存中,被操作系统调用的时候才开始它们的生命期.进程( ...

  5. 深入浅出数据结构C语言版（16）——插入排序

    从这一篇博文开始,我们将开始讨论排序算法.所谓排序算法,就是将给定数据根据关键字进行排序,最终实现数据依照关键字从小到大或从大到小的顺序存储.而这篇博文,就是要介绍一种简单的排序算法--插入排序(In ...

  6. Jenkins关于tomcat地址和端口映射的配置

    <?xml version='1.0' encoding='utf-8'?><!-- Licensed to the Apache Software Foundation (ASF) ...

  7. JPG、PNG和GIF图片的基本原理及优…

    JPG.PNG和GIF图片的基本原理及优化方法 一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的.这些点可以进行不同的 ...

  8. 团队作业8——Beta 阶段冲刺3rd day

    一.当天站立式会议 二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 添加了订单功能,并且对订单功能进行了测试 (2)今天计划完成的工作(具体如下) 添加支付功能 (3) 工作中遇到的困难(在 ...

  9. 团队作业4——第一次项目冲刺（Alpha版本）7th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 在计时模式下能够记录用户的用户名和成绩,没有弄登录功能, 将程序定义为单机的 未完成的卡片为登录功能和使用QQ登录. 四.困难 ...

  10. animation实现动画效果

    CSS3 animation 属性 CSS 参考手册 实例 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-anim ...