canvas上，如何绘制带有箭头的直线？

话不多说，直接上代码~~~

<canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

window.onload = function(){var cavParam = {};cavParam.canvas = document.getElementById("canvasId");cavParam.ctx = cavParam.canvas.getContext('2d');drawLineArrow(cavParam, 100, 300, 200, 200, "#a3a3a3");
}
/*** 绘制带有箭头的直线* @param cavParam canvas画布变量* @param fromX/fromY 起点坐标* @param toX/toY 终点坐标* @param color 线与箭头颜色**/
function drawLineArrow(cavParam, fromX, fromY, toX, toY, color) {var headlen = 10;//自定义箭头线的长度var theta = 45;//自定义箭头线与直线的夹角，个人觉得45°刚刚好var arrowX, arrowY;//箭头线终点坐标// 计算各角度和对应的箭头终点坐标var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;var angle1 = (angle + theta) * Math.PI / 180;var angle2 = (angle - theta) * Math.PI / 180;var topX = headlen * Math.cos(angle1);var topY = headlen * Math.sin(angle1);var botX = headlen * Math.cos(angle2);var botY = headlen * Math.sin(angle2);cavParam.ctx.beginPath();//画直线cavParam.ctx.moveTo(fromX, fromY);cavParam.ctx.lineTo(toX, toY);arrowX = toX + topX;arrowY = toY + topY;//画上边箭头线cavParam.ctx.moveTo(arrowX, arrowY);cavParam.ctx.lineTo(toX, toY);arrowX = toX + botX;arrowY = toY + botY;//画下边箭头线cavParam.ctx.lineTo(arrowX, arrowY);cavParam.ctx.strokeStyle = color;cavParam.ctx.stroke();
}

canvas上，如何绘制带有箭头的直线？相关推荐

Android Canvas绘制带箭头的直线
先看下效果图: 下面我们直接看代码我自定义了一个View,代码如下: package com.davis.drawtrangle;import android.content.Context; im ...
CAD中如何绘制带有箭头的引出标注？
我们在使用CAD标注快捷键的时候,通常是要在标注中使用箭头的,今天的CAD标注快捷键教程,小编将会给CAD制图初学入门小伙伴介绍国产CAD制图软件--浩辰CAD给排水软件中CAD箭头引注的相关操作技巧 ...
Matlab任意两点之间绘制带箭头的直线
Matlab任意两点之间绘制带箭头的直线简单绘制任意两点之间.本来不想自己写的,可是网上的代码用起来不舒服,所以简单看看原理,原来就是个坐标变换而已.索性自己写了一份,分享如下: function ...
百度地图轨迹开发，如何绘制带有箭头的折线
最近在开发百度地图时,需要绘制行人行走的轨迹,并在轨迹内使用箭头表示方向,和我们平常使用百度地图导航时一样,能通过箭头表示人行走的方向. 通过百度地图API,我们很容易能找到划线的方法P ...
python绘制有箭头的直线_Python绘图库Matplotlib，如何绘制箭头？
matplotlib中,常用arrow函数绘制箭头,该函数可通过以下两种方法调用. Axes.arrow(x, y, dx, dy, hold=None, **kwargs) 或 matplotlib ...
微信小程序绘制图片到canvas上并保存图片
绘制图片到canvas上并保存图片绘制图片到canvas上把绘制完的canvas导出绘制图片到canvas上 html代码 <canvas id="myCanvas" ...
android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
关于google地图api3的离线和在线开发（画带箭头的直线，指定范围，搜索，计算距离）
最近因为开发的需要,要做一个离线的google地图.并且能够加载google地图的一些特效.例如:地图的标记,计算距离,获取标记的经纬度,画带有箭头的直线,获取指定范围的数据等等.在这里我总结了很多开 ...
【MFC】如何画带箭头的直线
[MFC]如何画带箭头的直线前言代码获得箭头坐标前言如何绘制带箭头的直线,说来也简单,只需要算出箭头左右两边的坐标,再使用LineTo()函数即可.话不多说上代码. 代码获得箭头坐标已知 ...

canvas上，如何绘制带有箭头的直线？

canvas上，如何绘制带有箭头的直线？相关推荐

最新文章

热门文章