https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性,例如可以实现 “跑马灯“ 的效果。

语法

ctx.lineDashOffset = value;
value
偏移量是float精度的数字。 初始值为 0.0。

示例

使用 lineDashOffset 属性

这是一段简单的代码片段,使用 lineDashOffset 属性绘制虚线。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); ctx.setLineDash([4, 16]);
ctx.lineDashOffset = 2; ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

修改下面的代码并在线查看 canvas 变化:

ctx.setLineDash([30, 5]);
ctx.lineDashOffset = 1; ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(50, 100);
ctx.stroke();

“跑马灯”

”跑马灯“效果是一种动画技巧,经常出现在计算机绘图程序的选项工具中。 它能帮助用户根据图片背景动态变化的边界来区分选择的边界。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var offset = 0; function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.setLineDash([4, 2]);
ctx.lineDashOffset = -offset;
ctx.strokeRect(10,10, 100, 100);
} function march() {
offset++;
if (offset > 16) {
offset = 0;
}
draw();
setTimeout(march, 20);
} march();

规范描述

Specification Status Comment
WHATWG HTML Living Standard
CanvasRenderingContext2D.lineDashOffset
Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 7 (7) mozDashOffset
27 (27)
11 (Yes) (Yes)

Gecko-specific 注解

  • 从 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)开始, 实现了一个不标准的并且不赞成使用的属性 mozDashOffset 。 这个属性将来会被取消并移出, 请看bug 931643.。使用 lineDashOffset 替代。

WebKit-specific 注解

  • 基于 WebKit- 的浏览器 (例如 Safari), 实现了一个不标准的并且不赞成使用的属性 webkitLineDashOffset。 使用 lineDashOffset 替代。

参见

CanvasRenderingContext2D.lineDashOffset的更多相关文章

  1. Canvas基础

    1.1. 什么是 Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提 ...

  2. 24.Qt Quick QML-Canvas和Context2D详解

    1.Canvas介绍Canvas是一个允许绘制直线和曲线.简单和复杂的形状.图形和引用的图形图像.它还可以添加文本.颜色.阴影.渐变和图案,并执行低级别像素操作.Canvas输出可以另存为图像文件或序 ...

  3. TypeError: The CanvasRenderingContext2D.webkitBackingStorePixelRatio getter can only be used on instances of CanvasRenderingContext2D

    ios10: CanvasRenderingContext2D.prototype.webkitBackingStorePixelRatio 报异常

  4. HTML5 Canvas ( 扩展context('2d') ) CanvasRenderingContext2D.prototype.你的方法名

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. CanvasRenderingContext2D.imageSmoothingEnabled

    https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled 这是一个 ...

  6. 使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

    使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...

  7. CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);

    CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); [, maxWidth]的意思是,方括号代表可有可无,有fillText(tex ...

  8. CanvasRenderingContext2D.drawImage()无效,not working

    我的技术框架:react,如若不采用堵塞方式,即, const myimg = await loadImage(icon28) ctx.drawImage(myimg,0,0, 100, 100)   ...

  9. 今天写项目时,突然发现canvas的一些公式不记得了,所以整理了一番,分享给大家。

    Canvas 标签<canvas></canvas> 默认宽300,高150,不用用Css设置宽高 获取方法var ctx = cas.getcontext("2d& ...

随机推荐

  1. spingboot集成jpa(一)

    springboot + jpa 练习 spingboot集成jpa(一):最基本的环境搭建 spingboot集成jpa(二):使用单元测试 1. pom.xml中添加依赖 <!-- jdbc ...

  2. LAMP 环境搭建关键步骤及注意事项

    一.安装MySQL1): 编译安装MySQL+----------------------------------------------------------------------------- ...

  3. Jquery动态添加 删除 操作实现

    这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...

  4. 使用HashMap,put()表示放置元素,get()表示取元素

    SortedSet可自动为元素排序. SortedSet的实现类是TreeSet:它的作用是字为添加到TreeSet中的元素排序. 与HashSet不同,TreeSet并不需要实现HashCode() ...

  5. php -- 修改字符串的编码格式

    网上的都是这样用的 $content = iconv("utf-8","gb2312",$content); 这样做其实也对着了,看着确实是把utf-8转化为g ...

  6. 【BZOJ】1096: [ZJOI2007]仓库建设(dp+斜率优化)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1096 首先得到dp方程(我竟然自己都每推出了QAQ)$$d[i]=min\{d[j]+cost(j+ ...

  7. 登陆Oracle11g的企业管理器

    本地:https://localhost:1158/em/ 如果远程:那么把localhost换成服务器IP

  8. 工作中php处理HTTP请求的缺陷总结

    之前遇到过php在处理一部分业务的时候总是感觉有短板,有些东西总是不能随人心意.比如执行时间问题,一个进程需要读取多条数据放入数组循环执行处理流程,就会很慢,容易超时,这个超时问题 可以用php设置s ...

  9. 第九篇:使用 AdaBoost 元算法提高分类器性能

    前言 有人认为 AdaBoost 是最好的监督学习的方式. 某种程度上因为它是元算法,也就是说它会是几种分类器的组合.这就好比对于一个问题能够咨询多个 "专家" 的意见了. 组合的 ...

  10. 在VS2013下如何配置DirectX SDK的开发环境_百度经验

    jpg改rar