[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文，写完弧度与贝塞尔曲线[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)的更多相关文章
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
随机推荐
- SpringMVC（三）-- 视图和视图解析器、数据格式化标签、数据类型转换、SpringMVC处理JSON数据、文件上传
1.视图和视图解析器 请求处理方法执行完成后,最终返回一个 ModelAndView 对象 对于那些返回 String,View 或 ModeMap 等类型的处理方法,SpringMVC 也会在内部将 ...
- weblogic 启动问题
通过startWebLogic.cmd 手动启动weblogic可以成功启动 myeclipse配置后,runserver 就会报 Error occurred during initializati ...
- 【渗透课程】第五篇-SQL注入的原理
哈哈哈,讲到注入了.我想给大家讲注入的原理.这个我们前面的前言篇就说过,所谓的SQL注入就是,绕过数据库验证机制直接执行SQL语句.怎么说呢,我们先讲一个概念吧! 网站和网页的区别 单纯的网页是静态的 ...
- 关于回文串的DP问题
问题1:插入/删除字符使得原字符串变成一个回文串且代价最小 poj 3280 Cheapest Palindrome 题意:给出一个由m中字母组成的长度为n的串,给出m种字母添加和删除花费的代价,求让 ...
- Spring详解（二）------IOC控制反转
我相信提到 Spring,很多人会脱口而出IOC(控制反转).DI(依赖注入).AOP等等概念,这些概念也是面试官经常问到的知识点.那么这篇博客我们就来详细的讲解 IOC控制反转. ps:本篇博客源码 ...
- JSP的getRequestDispatcher()与sendRedirect()的区别
getRequestDispatcher()与sendRedirect()的区别 1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ; r ...
- 转载 java基础题（面试必知）
1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽象包 ...
- Error Handling in ASP.NET Core
Error Handling in ASP.NET Core 前言 在程序中,经常需要处理比如 404,500 ,502等错误,如果直接返回错误的调用堆栈的具体信息,显然大部分的用户看到是一脸懵逼的 ...
- WebApi Ajax 跨域请求解决方法（CORS实现）（作者：jianxuanbing）
概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各 ...
- Python闭包及其作用域
Python闭包及其作用域 关于Python作用域的知识在python作用域有相应的笔记,这个笔记是关于Python闭包及其作用域的详细的笔记 如果在一个内部函数里,对一个外部作用域(但不是全局作用域 ...