前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas虚线绘制

canvas虚线绘制

作者头像
lzugis
发布2020-06-28 11:19:23
1.4K0
发布2020-06-28 11:19:23
举报
文章被收录于专栏:跟牛老师一起学WEBGIS

概述

晚上闲来无事,又不想看书,就写代码段锻炼一下脑子。本示例实现canva绘制虚线,因为canvas原生没有的。

效果

效果
效果

实现

代码语言:javascript
复制
function drawDashLine(start, end, dash) {
    var deltX = end[0] - start[0];
    var deltY = end[1] - start[1];
    var totalDis = Math.sqrt(deltX * deltX + deltY * deltY);

    var getPos = function (pos, dis) {
        var deltXS = pos[0] - start[0];
        var deltYS = pos[1] - start[1];
        var baseDis = Math.sqrt(deltXS * deltXS + deltYS * deltYS);
        var percent = (dis + baseDis) / totalDis;
        var x = start[0] + deltX * percent;
        var y = start[1] + deltY * percent;
        return [x, y];
    };

    var dis = 0;
    for(var i = 0; i < dash.length; i++) {
        dis += dash[i];
    }
    var count = Math.ceil(totalDis / dis);
    var _start = start.concat([]);
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'red';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    for (var i = 0; i < count; i++) {
        for(var j = 0; j < dash.length; j++) {
            if(j % 2===0) {
                ctx.beginPath();
                ctx.moveTo(_start[0], _start[1]);
                _start = getPos(_start, dash[j]);
                ctx.lineTo(_start[0], _start[1]);
                ctx.stroke();
            } else {
                _start = getPos(_start, dash[j]);
            }
        }
    }
}
// 调用绘制
drawDashLine([10, 10], [500, 500], [15, 10, 1, 10]);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/06/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档