Canvas:绘制路径
Canvas:绘制路径
绘制路径
图形的基本元素是路径。路径是[通过不同颜色和宽度的线段或曲线相连形成的不同形状的]点的集合。一个路径,甚至一个子路径,都是闭合的。
使用路径绘制图形需要一些额外的步骤。
- 首先,你需要创建路径起始点。
- 然后你使用画图命令去绘制路径。
- 之后把路径进行封闭。
- 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。
函数解释
beginPath()
【说明】:清空子路径列表,并新建一条路径。
【例子】:绘制两条颜色不同的直线。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d'); // First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke(); // Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
说明:如果我们在Second Path部分删掉 ctx.beginPath(); 那么最后一行的stroke将会重新绘制所有的两条路径,也就是说第一条路径被绘制了两次,且第二次的效果覆盖了第一次。
moveTo()/lineTo()
【说明】
moveTo:将一个新的子路径的起始点移动到(x,y)坐标的方法。
lineTo:使用直线连接子路径的终点到x,y坐标的方法(并不会真正地绘制)。
说明:这两个方法都不会真正绘制图形,相当于隐形墨水,来描述路径,我们知道stroke和fill方法才会真正描边或者填充图形。
closePath()
【说明】:尝试从当前点添加直线到子路径的开始点,来闭合路径。
【实例】:绘制一个三角形
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.moveTo(20, 150); // Move pen to bottom-left corner
ctx.lineTo(120, 20); // Line to top corner
ctx.lineTo(220, 150); // Line to bottom-right corner
ctx.closePath(); // Line to bottom-left corner
ctx.stroke();
说明:我们只使用lineTo画了两条子路径,但是效果是一个三角形,这是因为最后的closePath(),绘制了一条指向开始点的直线。
实例:绘制一个网格
代码
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d'); function drawGrid(context,color,stepx,stepy) {
context.strokeStyle = color;
context.lineWidth = 0.5;
for(var i = stepx+0.5;i<context.canvas.width;i+=stepx)
{
context.beginPath();
context.moveTo(i,0);
context.lineTo(i,context.canvas.height);
context.stroke();
}
for(var i = stepy+0.5;i<context.canvas.height;i+=stepy)
{
context.beginPath();
context.moveTo(0,i);
context.lineTo(context.canvas.width,i);
context.stroke();
}
} drawGrid(context,"lightgray",10,10);
</script>
效果
Canvas:绘制路径的更多相关文章
- canvas绘制路径
canvas绘制路径 方法 beginPath() 创建一个新的路径 lineTo() 描绘路径 closePath() 沿着路径画直线,并且画点移动到路径开头 stroke() 绘制形状 fill( ...
- (四)canvas绘制路径
save() 样式不受污染的起始范围 shadowOffsetX 阴影x轴的距离 shadowOffsetY 阴影y轴的距离 shadowBlur 模糊度 shadowColor 阴影颜色 resto ...
- canvas学习总结三:绘制路径-线段
Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...
- Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...
- canvas绘制折线路径动画
最近有读者加我微信咨询这个问题: 其中的效果是一个折线路径动画效果,如下图所示: 要实现以上路径动画,一般可以使用svg的动画功能.或者使用canvas绘制,结合路径数学计算来实现. 如果用canva ...
- 使用canvas绘制一个时钟
周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
随机推荐
- ARM与X86架构的对决[整编]
CISC(复杂指令集计算机)和RISC(精简指令集计算机)是当前CPU的两种架构.它们的区别在于不同的CPU设计理念和方法.早期的CPU全部是CISC架构,它的设计目的是 CISC要用最少的机器语言 ...
- webapck卸载以及更换版本
有时候我们需要安装webpack的指定版本,但是又安装了webpack的其他版本,就需要先卸载webpack 1.先执行 npm uninstall webpack -g 2.找到webpack的文件 ...
- 几款 ping tcping 工具总结
本文转载至:http://www.cnblogs.com/kerrycode/p/8092942.html ping 命令以前是一个很好用并且常用的网络测试工具,它是基于 ICMP 协议,但是出于网络 ...
- EJB EJB定义了一组可重用的组件:Enterprise Beans
EJB EJB定义了一组可重用的组件:Enterprise Beans.开发人员可以利用这些组件,像搭积木一样建立分布式应用.
- 【vijos】1746 小D的旅行(dijkstra)
https://vijos.org/p/1746 这题就是水题.裸的跑完每个点的最短路后直接可以暴力出解.. 这题贴出来是因为我改了下我的dijkstra的模板...(其实是原来一直写错了233 注意 ...
- hdu 1051:Wooden Sticks(水题,贪心)
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- java 连接mariadb 无法获取数据源的问题,在ubuntu上部署的时候(原创)
问题: 连接数据库时报错: log4j:WARN No appenders could be found for logger (com.mchange.v2.log.MLog).log4j:WARN ...
- MATLAB使用fft求取给定音频信号的频率
一段10s立体声音频,采样率位8000Hz,已知频率为1000Hz clc; clear; [data, Fs] = audioread('1khz_stereo_8000.wav'); fs=Fs; ...
- null!= xxx 和 xxx!=null有什么区别?
从意义上将没有区别,从编程规范上讲,第一种写法是为了防止写成:null = xxx
- 【BZOJ2962】序列操作 线段树
[BZOJ2962]序列操作 Description 有一个长度为n的序列,有三个操作1.I a b c表示将[a,b]这一段区间的元素集体增加c,2.R a b表示将[a,b]区间内所有元素变成相反 ...