canvas虚线绘制

概述

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

效果

实现

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]);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从我的历程谈谈该如何学习

    很多时候,会有一些刚毕业或刚入行的童鞋问我:老师,怎么学习webgis开发?我也一直在思考这个问题,作为一个新人,应该如何学习webgis,降低webgis的学...

    lzugis
  • CSS+JS实现图片集展示(二)

    题目与上面的两篇文章有所重复,但是内容与上两篇上有所区别,本文中,实现的图片集展示的效果为:

    lzugis
  • 将数据压缩到图片并在前端做解析渲染

    在做前后端数据交互的时候,你一定遇到过这样的问题:数据量大,尤其是在气象行业!在本文,讲解一种将数据压缩到图片并在前端实现数据的解析与展示的功能。

    lzugis
  • Mybatis系列之设置自动提交事务

    业务描述:最近遇到业务很复杂的方法,有通过Spring的@Transactional注解开启事务的,不过在ie11出现bug,console日志打印已经upda...

    SmileNicky
  • 【技术分享】带权最小二乘

    $$minimize_{x}\frac{1}{2} \sum_{i=1}^n \frac{w_i(a_i^T x -b_i)^2}{\sum_{k=1}^n w...

    腾讯智能钛AI开发者
  • 有道云笔记到简书的迁移工具

    然后在使用这个html网页,将云笔记的文章源代码里包含的[图片]转换成markdown格式:

    Jerry Wang
  • VUE 插件注册

    通过全局方法Vue.use()使用插件,它需要你调用new Vue()启动应用之前完成

    用户7533190
  • 获取某一天是该年中的第多少周

    比如第一年第一天是星期一,那么直接获取那一天是该年中的第多少天,取它除以7的上限;

    meteoric
  • Spark MLlib中KMeans聚类算法的解析和应用

    聚类算法是机器学习中的一种无监督学习算法,它在数据科学领域应用场景很广泛,比如基于用户购买行为、兴趣等来构建推荐系统。

    大数据学习与分享
  • MOOON-server新消息处理接口

        MOOON-server提供了一个通用的TCP框架,并对包的解析抽象出了IPacketHandler接口,这个接口提供了无限制的宽容度,支持任何协议,但...

    一见

扫码关注云+社区

领取腾讯云代金券