canvas-画线

坐标系统简析

左边是笛卡尔坐标系,右边是canvas坐标系。

笛卡尔坐标系(Cartesian coordinate system):

也称直角坐标系,是一种正交坐标系。二维的直角坐标系是由两条相互垂直、0点重合的数轴组成。

canvas坐标系和web坐标系一致,左上角为原点。

绘制线

代码基础:

var canvas = document.getElementById('j-canvas');if (canvas.getContext) {    var ctx = canvas.getContext('2d');    // 在此添加代码}

主要方法:

lineTo()

单纯只用上面一个方法是不能画出线的,需要别的方法配合:

        ctx.moveTo(0,10); // 画笔的起点或重新定位画笔        ctx.lineTo(200,10);        ctx.stroke(); // 描边 

绘制结果,如下:

修饰方法:

lineWidth:默认值 1.0

  ctx.lineWidth = number;

lineCap: 线的尾部何种样子

ctx.lineCap = "butt"; // 默认值ctx.lineCap = "round";ctx.lineCap = "square";

如下:

square的尺寸为: lineWidth/2 * lineWidth

lineJoin: 线与线之间如何衔接

ctx.lineJoin = "bevel";ctx.lineJoin = "round";ctx.lineJoin = "miter"; // 默认值

注:round的半径是lineWidth,miter为两条线延伸然后组成一个菱形。

miterLimit:

ctx.miterLimit = value; // 默认值 10.0,(设置为:0, 负值, Infinity and NaN 则忽略)

设置或返回最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离:

注:只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效。

如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示(图解 3):

setLineDash():

ctx.setLineDash(segments); // segments 为数组

若数组为:[5,10],设置偶数个数值,[线,空白]交替绘制

线就是5,空白就是10。

如果数组为:[5,10,15],设置奇数个数值,内部会变成 [5,10,15,5,10,15],[线,空白,线,空白,线,空白]

getLineDash():

ctx.getLineDash(); 

返回一个偶数个数字的数组,若设置的为[5,10],返回则为[5,10];若设置的为[5,10,15],返回则为[5,10,15,5,10,15]。

lineDashOffset:

ctx.lineDashOffset = value;

默认值:0.0,设置线的偏移量,可正(整体逆时针移动),可负(整体顺时针移动)

绘制(Marching ants)

var offset = 0;(function march(){    ctx.clearRect(0,0,canvas.width,canvas.height);     ctx.setLineDash([5, 10]);    ctx.beginPath();    ctx.lineDashOffset = -offset;    ctx.moveTo(10, 40);    ctx.lineTo(200, 40);    ctx.lineTo(200,100);    ctx.lineTo(10,100);    ctx.lineTo(10,40)    ctx.stroke();    // 增加    offset++;    setTimeout(xxx,100)})();

原理:offset每100毫秒增加一个单位,每增加一个单位整体就向右移动一个单位,再配合 clearRect 清除画布,视觉上感觉就是在顺时针移动。

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2017-04-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Android开发之Path详解

在制作高级控件的时候往往会用到很多的高级数学公式,例如本文将要讲到的贝塞尔曲线,结合Path使用,可以实现很多复杂的动画效果。 一.Path常用方法表 作...

4995
来自专栏菩提树下的杨过

silverlight:贝塞尔曲线

Silverlight并没有象flash那样直接提供画线、画圆、画曲线的方法,只能用Path来生成贝塞尔曲线。 下面是示例代码: XAML部分: <UserCo...

19110
来自专栏codelang

用kotlin来实现一个打方块的小游戏

1481
来自专栏重庆的技术分享区

HTML5-Canvas初探(1)

1932
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(9)---使用公式

Spread的公式计算引擎支持300多种内置函数,并支持通过内置函数和运算符来自定义公式。支持的函数包括日期、时间函数、工程计算函数、财务计算函数、逻辑函数、数...

2275
来自专栏腾讯IVWEB团队的专栏

WebGL 纹理颜色原理

现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来,那么这个过程是什么样,如果图形的颜色需要用现有图片来渲染那么又该如何操作?

5651
来自专栏互联网软件技术

canvas实现验证码

在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。

1553
来自专栏我有一个梦想

Python 项目实践二(生成数据)第一篇

上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关...

3019
来自专栏柠檬先生

css3 gradient 渐变

分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 1.线性渐变在Mozilla 下应用   语法:-moz-...

2106
来自专栏落影的专栏

Metal图像处理——颜色查找表(Color Lookup Table)

一张1024x1024的普通图片,是由1024 * 1024=1048576个像素点组成,每个像素点包括RGBA共32bit,常见的图像处理是对相邻像素点颜色、...

4156

扫码关注云+社区

领取腾讯云代金券