Canvas 教程：如何绘制带箭头的曲线

这篇文章要解决一个问题，就是给定 HTML 中任意一个点（起点）和另一个点（终点），绘制一条带箭头的曲线。

废话不多说，直奔主题。

我们只有两个点的相对偏移量（offset），思路就是以这两个点作为对角，创建一个绝对定位的 Canvas，然后在两点中绘制一条曲线（Curve），最后在终点处绘制箭头（Arrow）。

因此分为 3 步：

创建适当的 Canvas
绘制曲线
绘制箭头

创建适当的 Canvas

先确定 Canvas 的绝对定位偏移量，因为是任意两点，所以对角可能是左上加右下，也可能是左下加右上，不论是哪一种，它的左偏移量一定是两个点的左偏移量的最小值，同理，上偏移量也是两个点的上偏移量的最小值。

再确定 Canvas 的宽和高，宽等于两点左偏移量之差的模，长等于两点上偏移量之差的模。

// 随机的起始点和终点，这里不考虑边缘情况，实际生产环境下，相近的两点应该很少会有加指向性箭头的需求
const sp = { left: Math.floor(window.innerWidth * Math.random()), top: Math.floor(window.innerHeight * Math.random()) };
const ep = { left: Math.floor(window.innerWidth * Math.random()), top: Math.floor(window.innerHeight * Math.random()) };const canvas = document.createElement('canvas');
canvas.style.position = 'absolute'; // 设置绝对定位
canvas.style.left = Math.min(sp.left, ep.left) + 'px'; // 设置左偏移量
canvas.style.top = Math.min(sp.top, ep.top) + 'px'; // 设置右偏移量
canvas.width = Math.abs(sp.left - ep.left); // 设置宽度
canvas.height = Math.abs(sp.top - ep.top); // 设置高度// 顺便为 Canvas 加个红色的边框，方便 debug
canvas.style.border = '1px solid red';// 把 Canvas 放到 body 中
document.body.appendChild(canvas);

绘制曲线

Canvas 中绘制曲线很简单，API 中已经提供了贝塞尔曲线（Bezier Curve）的绘制方法。

而控制点的掌握…全靠经验

Canvas 教程：如何绘制带箭头的曲线相关推荐

Android Canvas绘制带箭头的直线
先看下效果图: 下面我们直接看代码我自定义了一个View,代码如下: package com.davis.drawtrangle;import android.content.Context; im ...
R语言使用rnorm函数生成正太分布数据、使用plot函数可视化折线图、使用arrows函数在可视化图像中绘制箭头曲线、绘制带箭头线段，可以设置箭头角度，有几个箭头（1起点箭头、2终点箭头，3双箭头）
R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线图.使用arrows函数在可视化图像中绘制箭头曲线.绘制带箭头线段,可以设置箭头角度,有几个箭头(1起点箭头.2终点箭头,3双箭头) ...
Matlab如何绘制带箭头图形
Matlab如何绘制带箭头图形带箭头坐标轴带箭头曲线实例演示例1 带箭头曲线例2 带箭头曲线+带箭头坐标轴联系作者带箭头坐标轴前段时间推出了绘制箭头坐标轴曲线的方法,许多网友联系我索取 ...
Matlab任意两点之间绘制带箭头的直线
Matlab任意两点之间绘制带箭头的直线简单绘制任意两点之间.本来不想自己写的,可是网上的代码用起来不舒服,所以简单看看原理,原来就是个坐标变换而已.索性自己写了一份,分享如下: function ...
Echarts绘制带箭头的线
Echarts绘制带箭头的线这个图主要参考echarts官网的关系图绘制的,难点在于去掉其余导向图的箭头,只保留最后一个节点的箭头,以及处理值为null时箭头的指向问题,代码如下: <temp ...
matlab绘制带阴影的曲线
%% 使用matlab绘制带阴影区域的曲线: figure; n = 50; x = linspace(40,70,n); y = .7*x + normrnd(0,5,size(x)); plot( ...
WebGL绘制带箭头贴图的线
示例在讲述本文内容之前,我希望读者先具备以下知识点: 了解WebGL的基本知识,懂得调用自定义的Shader程序: 基本的数学基础和空间几何知识: 明白GPU的渲染管线流程: 因为,本文内容主要讲述 ...
生成有箭头的流向Line.shp 并通过ArcMap绘制带箭头的图，根据D8算法，输入Flow Direction
简单说明:代码C++,配置GDAL环境(必须),ArcMap 附一个配置GDAL环境的教程,感谢这位大佬 VS2017编译配置GDAL库输入流向数据的 asc文件,附网盘测试链接链接:https: ...
opencv之绘制带箭头的线段---arrowedLine
核心函数 arrowedLine(img, pt1, pt2, color, thickness=None, line_type=None, shift=None, tipLength=None) i ...

Canvas 教程：如何绘制带箭头的曲线

创建适当的 Canvas

绘制曲线

Canvas 教程：如何绘制带箭头的曲线相关推荐

最新文章

热门文章