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),作者:楔子

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用引流公众号组件,你需要知道这些

    小程序又开放一项新能力,就是可以在小程序里面引导关注公众号,那以前是怎么做公众号导流的呢?由于小程序里面无法直接识别二维码,只能提示用户保存公众号二维码,然后微...

    前端黑板报
  • 彻底揭秘keep-alive原理

    用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。keep-a...

    前端黑板报
  • 几款Chrome插件

    Auto Copy 它的功用是即选即拷,可以选择不带格式的copy,对需要经常从网页上拷贝字词到world里的人来说很方便。 ? Vimium 熟悉Vim命令...

    前端黑板报
  • 给pugjs的stun主题添加canvas时钟

    首先隔了这么久才继续进行更新的原因是网站备案和毕业设计,加上刚入职没有时间去进行内容更新,以后会继续更新了

    impressionyang
  • JavaScript实现iphone时钟

    http://www.w3school.com.cn/tags/html_ref_canvas.asp

    Jack Chen
  • 第156天:canvas(三)

    ​ translate方法接受两个参数。x 是左右偏移量,y 是上下偏移量,如右图所示。

    半指温柔乐
  • 基于Canvas的时钟

    这里有一点取巧:画完外圈圆、内圈圆后,将原点(默认为0,0)转换为圆的中心点,这样的话,只需要知道角度,在已知时针、分针、秒针它的长度情况下,很容易求出对应的坐...

    meteoric
  • Canvas基本动画-太阳系的动画 原

    1、清空canvas 除非接下来要画的内容会完全充满canvas(例如背景图),否则你需要清空所有,最简单的方法是使用clearRect方法 2、保存can...

    tianyawhl
  • canvas绘制闹钟-方法1 原

    总结:角度旋转默认是按右边水平方向,向下旋转,现在逆时针把画布旋转90度,使旋转的起始位置在正上方,画布旋转后x轴与y轴也随着画布旋转而旋转; 注意画好图之后...

    tianyawhl
  • Canvas 奇妙历险(一)

    canvas的中文名叫画布,是HTML5元素的一部分。最早是由苹果公司提出的这么一个概念,后来被应用在我们的网络技术上,结合Javascript脚本编程,我们可...

    丰臣正一

扫码关注云+社区

领取腾讯云代金券