标签：ipa 虚线 new sel 规范 跑马灯 cti line var
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现 “跑马灯“ 的效果。
ctx.lineDashOffset = value;
value0.0。lineDashOffset 属性这是一段简单的代码片段，使用 lineDashOffset 属性绘制虚线。
<canvas id="canvas"></canvas>
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) |
mozDashOffset 。 这个属性将来会被取消并移出， 请看bug 931643.。使用 lineDashOffset 替代。webkitLineDashOffset。 使用 lineDashOffset 替代。CanvasRenderingContext2D.lineDashOffset
标签：ipa 虚线 new sel 规范 跑马灯 cti line var
原文地址：http://www.cnblogs.com/jiangxiaobo/p/5989773.html
