首页 > 代码库 > CanvasRenderingContext2D.lineDashOffset
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 |
浏览器兼容性
- Desktop
- Mobile
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
CanvasRenderingContext2D.getLineDash()
CanvasRenderingContext2D.setLineDash()
CanvasRenderingContext2D.lineDashOffset
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。