CanvasRenderingContext2D.lineDashOffset
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的更多相关文章
- Canvas基础
1.1. 什么是 Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提 ...
- 24.Qt Quick QML-Canvas和Context2D详解
1.Canvas介绍Canvas是一个允许绘制直线和曲线.简单和复杂的形状.图形和引用的图形图像.它还可以添加文本.颜色.阴影.渐变和图案,并执行低级别像素操作.Canvas输出可以另存为图像文件或序 ...
- TypeError: The CanvasRenderingContext2D.webkitBackingStorePixelRatio getter can only be used on instances of CanvasRenderingContext2D
ios10: CanvasRenderingContext2D.prototype.webkitBackingStorePixelRatio 报异常
- HTML5 Canvas ( 扩展context('2d') ) CanvasRenderingContext2D.prototype.你的方法名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CanvasRenderingContext2D.imageSmoothingEnabled
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled 这是一个 ...
- 使用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 ...
- CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);
CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); [, maxWidth]的意思是,方括号代表可有可无,有fillText(tex ...
- CanvasRenderingContext2D.drawImage()无效,not working
我的技术框架:react,如若不采用堵塞方式,即, const myimg = await loadImage(icon28) ctx.drawImage(myimg,0,0, 100, 100) ...
- 今天写项目时,突然发现canvas的一些公式不记得了,所以整理了一番,分享给大家。
Canvas 标签<canvas></canvas> 默认宽300,高150,不用用Css设置宽高 获取方法var ctx = cas.getcontext("2d& ...
随机推荐
- Linux crontab 实现每秒执行
Linux crontab 实现每秒执行 linux crontab 命令,最小的执行时间是一分钟.如需要在小于一分钟内重复执行,可以有两个方法实现. 1.使用延时来实现每N秒执行 创建一个php做执 ...
- 数学 - Codeforces Round #319 (Div. 1)A. Vasya and Petya's Game
Vasya and Petya's Game Problem's Link Mean: 给定一个n,系统随机选定了一个数x,(1<=x<=n). 你可以询问系统x是否能被y整除,系统会回答 ...
- Easyui Datagrid相同连续列合并扩展(二)
JS: //合并相同数据的单元格 function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || ...
- [Java] 高效快速导入EXCEL数据
需求1.高效率的以excel表格的方式导入多条数据.2.以身份证号为唯一标识,如果身份证号已存在,则该条数据不导入. 分析刚开始的时候是传统的做法,解析excel数据,获取单个对象,判断身份证是否已存 ...
- C++ 智能指针学习
C++ Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
- 在visual studio中运行C++心得
1.在visual studio中建立C++项目 (1)新建->项目->空项目 C++ (2)右击项目->添加->新建项->C++文件(.app) (3编写C++文件 ...
- maven项目引入jar包
今天看一下maven项目的创建和具体操作.
- spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件)
关键字:spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) 应用场景:很多时候我们想要在某个类加载完毕时干某件事情,但是使用了spring管理对象,我们这个类引用 ...
- Java 字符串转成运算公式
GroovyShell 实现 public static void main(String args[]) { Binding binding = new Binding(); binding.set ...
- 事务以及MySQL事务隔离级别+MySQL引擎的区别
1.事务的基本要素:ACID 1.原子性(Atomicity): 事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节.事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有 ...