[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解
路径在canvas绘图中,经常被用到,是一个非常重要的概念.
比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分.
<style>
body {
background: #000;
}
#canvas{
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.strokeStyle = 'red';
oGc.moveTo( 50, 50 );
oGc.lineTo( 500, 50 );
oGc.stroke(); oGc.strokeStyle = 'orange';
oGc.moveTo( 50, 150 );
oGc.lineTo( 500, 150 );
oGc.stroke(); oGc.strokeStyle = 'yellow';
oGc.moveTo( 50, 250 );
oGc.lineTo( 500, 250 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
在画每一条线之前,我都用storeStyle设置了线的颜色,但是,出来的结果却是3条黄色的线,并不是红、橙、黄三条颜色不同的线。为什么呢?
首先我们要搞清楚canvas渲染图形,它是基于状态的,所谓状态就是每一次用( stroke/fill )之类的API渲染图形的时候,canvas会检查整个程序定义的( strokeStyle, fillStyle, lineWidth等 )当一个状态值没有被改变时,canvas就一直用这个状态。如果被改变,这里就要注意了:
1,如果使用beginPath()开始一个新的路径,则不同路径使用当前路径的值
2,如果没有使用beginPath()开始一个新的路径,后面的会覆盖前面的.
而我们这个程序就是属于第2种情况,尽管strokeStyle被改变了,但是没有用beginPath()开启新路径,所以前面两个strokeStyle会被最后一个strokeStyle='yellow'覆盖。所以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.strokeStyle = 'red';
oGc.moveTo( 50, 50 );
oGc.lineTo( 500, 50 );
oGc.stroke(); oGc.beginPath();
oGc.strokeStyle = 'orange';
oGc.moveTo( 50, 150 );
oGc.lineTo( 500, 150 );
oGc.stroke(); oGc.beginPath();
oGc.strokeStyle = 'yellow';
oGc.moveTo( 50, 250 );
oGc.lineTo( 500, 250 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
closePath:关闭路径
所谓关闭路径就是:指的是将同一个路径中的起点与终点相连接.
比如,我们画个三角形,不使用路径的时候,我们这样做:
<style>
body {
background: #000;
}
#canvas{
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.moveTo( 50, 50 );
oGc.lineTo( 250, 50 );
oGc.lineTo( 250, 150 );
oGc.lineTo( 50, 50 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
最后一次用lineTo( 50, 50 )连接到起点,如果我们使用closePath,就不需要这一步操作了.
<style>
body {
background: #000;
}
#canvas{
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.moveTo( 50, 50 );
oGc.lineTo( 250, 50 );
oGc.lineTo( 250, 150 );
oGc.closePath();
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
在stroke之前,用closePath关闭路径,他就会把( 250, 150)这个点和起始点( 50, 50 )连接起来.
画2个三角形:
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.moveTo( 50, 50 );
oGc.lineTo( 250, 50 );
oGc.lineTo( 250, 150 );
oGc.closePath();
oGc.stroke(); oGc.moveTo( 50, 150 );
oGc.lineTo( 250, 150 );
oGc.lineTo( 250, 250 );
oGc.closePath();
oGc.stroke();
使用路径,绘制两个不同颜色的三角形:
<style>
body {
background: #000;
}
#canvas{
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); //这段oGc.beginPath可有可无,不会影响结果,但是建议加上,代码可读性比较好一点
oGc.beginPath();
oGc.strokeStyle = 'red';
oGc.moveTo( 50, 50 );
oGc.lineTo( 250, 50 );
oGc.lineTo( 250, 150 );
oGc.closePath();
oGc.stroke(); oGc.beginPath();
oGc.strokeStyle = '#09f';
oGc.moveTo( 50, 150 );
oGc.lineTo( 250, 150 );
oGc.lineTo( 250, 250 );
oGc.closePath();
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解的更多相关文章
- [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系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [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 ...
随机推荐
- java web轻量级开发面试教程读书笔记:建索引时我们需要权衡的因素
场景一,数据表规模不大,就几千行,即使不建索引,查询语句的返回时间也不长,这时建索引的意义就不大.当然,若就几千行,索引所占的空间也不多,所以这种情况下,顶多属于"性价比"不高. ...
- JS函数-我调用自己试试看
前言 最近在读<JavaScript语言精粹>,对递归函数有了进一步的认识,希望总结下来: 递归是一种强大的编程技术,他把一个问题分解为一组相似的子问题,每一问题都用一个寻常解去解决.递归 ...
- WEB前端规范命名
头部 header ----------------用于头部 主要内容 main ------------用于主体内容(中部) 左侧 main-left -------------左侧布局 右侧 ma ...
- 菜单栏—View(视图)菜单
- java‘小秘密’系列(三)---HashMap
java'小秘密'系列(三)---HashMap java基础系列 java'小秘密'系列(一)---String.StringBuffer.StringBuilder java'小秘密'系列(二)- ...
- Spring Cloud官方文档中文版-服务发现:Eureka服务端
官方文档地址为:http://cloud.spring.io/spring-cloud-static/Dalston.SR3/#spring-cloud-eureka-server 文中例子我做了一些 ...
- 最新Windows下Redis集群
实现简单的Windows下Redis集群配置,以下是配置过程中出现的几个问题: [1]逐个启动7001 7002 7003 7004 7005 7006节点时,出现createing server T ...
- ajax请求后台,有时收不到返回值的解决办法
昨天下午做项目遇到一个问题,贴出来方便以后翻阅,也给大家个参考. 问题: 具体做的是个文件导入的功能,导入的功能是成功了,但是界面一直得不到返回值,排查了一下午,调试的时候是可以有返回的,但是关掉浏览 ...
- H5-html基础
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...
- 自制MPLS解决路由黑洞实验
利用mpls解决BGP路由黑洞配置命令全解析 --By Jim 什么是BGP路由黑洞? BGP规定无论路由器是否启动bgp都要无条件地转发BGP消息和更新包(凌驾于IGP之上),违背了IGP" ...