html画直线箭头

最新推荐文章于 2024-05-06 18:07:38 发布
最新推荐文章于 2024-05-06 18:07:38 发布
阅读量2.9k 收藏
点赞数
分类专栏： html 文章标签： html 画线 箭头 

   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <!DOCTYPE html>  
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <html>  
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <head>  
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <meta charset=“UTF-8”>  
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <title>Text
       
       </title>  
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <script type=“text/javascript”>
       
         
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
       
       window.onload = 
       
       function(){
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         arrow2(
       
       “myCanvas”,
       
       0,
       
       0,
       
       0,
       
       0,
       
       300,
       
       100)
      
      
    
     
     
  10. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         arrow2(
       
       “myCanvas”,
       
       0,
       
       0,
       
       200,
       
       200,
       
       150,
       
       150)
      
      
    
     
     
  11. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         arrow2(
       
       “myCanvas”,
       
       0,
       
       0,
       
       20,
       
       200,
       
       150,
       
       150)
      
      
    
     
     
  12. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         arrow2(
       
       “myCanvas”,
       
       0,
       
       0,
       
       100,
       
       0,
       
       50,
       
       100)
      
      
    
     
     
  13. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         arrow2(
       
       “myCanvas”,
       
       0,
       
       0,
       
       0,
       
       100,
       
       300,
       
       100)
      
      
    
     
     
  14. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       }
      
      
    
     
     
  15. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       function arrow2(canId,ox,oy,x1,y1,x2,y2)
      
      
    
     
     
  16. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       {
      
      
    
     
     
  17. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       //参数说明 canvas的 id ，原点坐标  第一个端点的坐标，第二个端点的坐标
      
      
    
     
     
  18. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       var sta = 
       
       new 
       
       Array(x1,y1);
      
      
    
     
     
  19. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       var end = 
       
       new 
       
       Array(x2,y2);
      
      
    
     
     
  20. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  21. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       var canvas = 
       
       document.getElementById(canId);
      
      
    
     
     
  22. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       if(canvas == 
       
       null)
       
       return 
       
       false;
      
      
    
     
     
  23. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       var ctx = canvas.getContext(
       
       ‘2d’);
      
      
    
     
     
  24. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       //画线 
      
      
    
     
     
  25. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.beginPath(); 
      
      
    
     
     
  26. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.translate(ox,oy,
       
       0); 
       
       //坐标源点 
      
      
    
     
     
  27. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.moveTo(sta[
       
       0],sta[
       
       1]); 
      
      
    
     
     
  28. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.lineTo(end[
       
       0],end[
       
       1]); 
      
      
    
     
     
  29. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.fill();
      
      
    
     
     
  30. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.stroke(); 
      
      
    
     
     
  31. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.save();
      
      
    
     
     
  32. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  33. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  34. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
       
      
      
    
     
     
  35. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       //画箭头 
      
      
    
     
     
  36. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.translate(end[
       
       0],end[
       
       1]);
      
      
    
     
     
  37. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       //我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号
      
      
    
     
     
  38. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       var ang=(end[
       
       0]-sta[
       
       0])/(end[
       
       1]-sta[
       
       1]);
      
      
    
     
     
  39. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ang=
       
       Math.atan(ang);
      
      
    
     
     
  40. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       if(end[
       
       1]-sta[
       
       1] >= 
       
       0){
      
      
    
     
     
  41. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.rotate(-ang);
      
      
    
     
     
  42. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         }
       
       else{
      
      
    
     
     
  43. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
        ctx.rotate(
       
       Math.PI-ang);
       
       //加个180度，反过来
      
      
    
     
     
  44. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         } 
      
      
    
     
     
  45. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.lineTo(
       
       -5,
       
       -10); 
      
      
    
     
     
  46. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.lineTo(
       
       0,
       
       -5); 
      
      
    
     
     
  47. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.lineTo(
       
       5,
       
       -10); 
      
      
    
     
     
  48. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.lineTo(
       
       0,
       
       0); 
      
      
    
     
     
  49. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.fill(); 
       
       //箭头是个封闭图形
      
      
    
     
     
  50. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.restore();   
       
       //恢复到堆的上一个状态，其实这里没什么用。
      
      
    
     
     
  51. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         ctx.closePath(); 
      
      
    
     
     
  52. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       }
      
      
    
     
     
  53. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       </script>  
      
      
    
     
     
  54. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <style type=“text/css”>
       
         
      
      
    
     
     
  55. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
        
       
       canvas{
       
       border:
       
       #ccc solid 
       
       1px;}  
      
      
    
     
     
  56. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       </style>  
      
      
    
     
     
  57. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       </head>  
      
      
    
     
     
  58. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <body>  
      
      
    
     
     
  59. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
         
       
       <canvas id=“myCanvas” width=“500” height=“300”>
       
       </canvas>  
      
      
    
     
     
  60. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       </body>  
      
      
    
     
     
  61. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       </html>

转载自https://blog.csdn.net/kongjiea/article/details/23600009#commentBox

xiang2132
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 2.2.7修改版. 加入axisline的箭头样式
05-07
详情见 http://www.cnblogs.com/nigou/p/4775547.html
html5画直线箭头
热门推荐
kongjiea笔记
04-13 2万+
Text window.onload = function(){ arrow2("myCanvas",0,0,0,0,300,100) arrow2("myCanvas",0,0,200,200,150,150) arrow2("myCanvas",0,0,20,200,150,150) arrow2("myCanvas",0,0,100,0,50,100)
html+css画箭头【面试题】
最新发布
qq_44640575的博客
05-06 1015
箭头符号在Web开发中具有广泛的应用。本文将介绍如何使用HTML代码实现箭头符号，并探讨箭头符号的常见用途,在面试中也会遇到的题。
html转字符arrow,HtmlArrows|在线特殊符号大全
weixin_34118910的博客
06-24 331
HTML Arrows 是一个供给Unicode、Hex Code。Html Code等非凡标记的网站，良多非凡标记正在键盘上是没法输出的，这时候候就需求有一个网站能够查问这些非凡标记，间接复制便可运用了，不必为去满天下的查找而懊恼。HTML Arrows是一个以特殊符号为主题的线上工具，收录七大种类的符号，包括箭头、货币、文字、数学、数字、标点、符号，使用者不仅可以在页面检索，更棒的是每个符号都...
html带箭头的直线(javaScript实现)
08-20
线条控制已经做了封装 var line = new Line(); 挂号的四个值代表x1、y1、x2、y2 x1,y1表示起始点坐标 x2、y2表示结束点坐标(有箭头的一边) line.drawArrowLine(10, 10, 10, 100); 删除线条 line.remove() 设置颜色 line.setColor(newColor)
html 制作箭头,怎么使用html制作箭头？制作箭头代码分享！
weixin_29808375的博客
06-23 7713
我们在制作静态页面的时候一般的都会使用一些什么箭头、按钮等等各种形状的控件，但是一般比较常使用的就是用图片加入然后再设置函数从而达到预期的效果，那么今天我们就来说说不用照片怎么设计一个箭头吧！1.编写盒子代码首先我们使用开发工具设置编码格式为​Utf-8​(一般的文件都是这个格式，这边我们使用的是HBuilderX编辑器)在 .html文件中加入代码如下：html小箭头技巧我们在代码中还添加了​类...
html直线箭头,html5画直线带箭头 画圆
weixin_29129247的博客
05-30 203
参考资料直接贴代码了，对旋转那里我也是瞎蒙的Text画圆比较简单ctx.beginPath();ctx.fillStyle = "rgba(255,0,0,0.2)";ctx.save();ctx.translate(120,120);ctx.arc(30,30,80,20*Math.PI/180,2*Math.PI,true);ctx.fill();ctx.restore();ctx.close...
HTML网页画箭头
10-25
在本主题中，“HTML网页画箭头”主要关注如何在网页上创建和显示箭头，这在工作流设计器或流程设计器中非常常见，它们需要连接各个步骤或元素，形成可视化的工作流程。 SVG是一种基于XML的矢量图像格式，允许在网页...
svg画直线中间箭头
11-01
本文将详细讲解如何使用SVG在一条直线上绘制中间的箭头。 首先，SVG的基本结构是由一系列的元素构成的，包括矩形（rect）、圆形（circle）、路径（path）等。在SVG中绘制直线，我们可以使用`<line>`元素。例如，要...
js画直线带箭头哦
10-11
通过这种方式，你可以利用JavaScript和HTML5的Canvas API轻松地在网页上绘制出带有箭头的直线。这只是一个基本的实现，你可以根据需求进一步定制，如添加动画效果、响应式布局或交互功能等。记住，Canvas API提供了...
javascript基于HTML5 canvas制作画箭头组件
10-25
`paint`方法首先绘制箭头的直线部分，然后计算出箭头的头部坐标并绘制出来。 `set`方法用于设置箭头的起点（`sp`）和终点（`ep`），以及箭头的“强度”（`st`），这可能指的是箭头的长度或方向。`init`函数则将这些...
用HTML和CSS做箭头
qq_63361411的博客
01-23 753
用HTML和 CSS简单的做图片两侧的箭头 HTML部分: HTML部分: 可以利用定位来固定左右小盒子的位置，但是要注意子绝父相相！！ 两个盒子的共同特点我们可以利用并集选择器: 绝对定位的盒子居中: left:50%； top:50%； margin-left:-盒子宽度一半； margin-top:-盒子高度一半； （垂直居中不能用margin: 0 auto） 最后分开写，利用圆角边框修饰: 可以自己添加图片。 ...
html5画直线箭头,html5 canvas 画直线箭头
weixin_42530458的博客
05-30 243
大家好，最近在研究页面的动态效果，可是，搞了半天还是搞砸了。。。没有动态，只有静态。记录备份一下！整体感知训练整体感知训练window.onload = function(){//画出中心红点var can = document.getElementById("can");var cans = can.getContext('2d'); //得到画笔cans.beginPath();//开始绘制新...
HTML5 SVG画在直线中间的箭头
五只鸭子的专栏
11-01 1万+
箭头的路径实际上是一个等腰三角形的路线， 所以用sin,cos,tan等三角函数则可准确计算出箭头的位置和方向。 这样，箭头的方向就可以自动适应线条的方向，一点都不歪 如图
html5画直线箭头,Html5 canvas 画带箭头的线
weixin_33356544的博客
05-30 212
varcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");functionLine(x1,y1,x2,y2){this.x1=x1;this.y1=y1;this.x2=x2;this.y2=y2;}Line.prototype.drawWithArrowheads=function(ctx)...
border实现向上的小箭头
wangjiao1993的博客
05-30 1266
&lt;!DOCTYPE html&gt;  &lt;html lang="en"&gt;  &lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Document&lt;/title&gt;    &lt;style&gt;    .b_main{position:absolute}   
html动画 箭头线条,html – 悬停时动画的箭头线
weixin_31545945的博客
06-10 161
如何在悬停到箭头线条时将一个线条效果设置为动画效果？我尝试使用边框执行此操作,但此箭头和线条必须位于具有透明背景的图像上.我在这张图片的顶部有一条线,我需要在该图像的底部悬停并使用箭头悬停： 这是我的code：* {box-sizing: border-box;}.bg {margin: 0 auto;background: url('http://i.imgur.com/RECDV24.jpg'...
HTML+CSS 实现带横线的半箭头 ⥯ ⇌
qq_39503123的博客
07-08 1118
代码实现带横线的半箭头
用canvas画转弯箭头
05-20
以下是使用 canvas 画转弯箭头的示例代码： ```html <canvas id="arrow" width="200" height="200"></canvas> ``` ```js const canvas = document.getElementById("arrow"); const ctx = canvas.getContext("2d");...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值