html5 canvas 画直线箭头

时间：2024-04-01 17:00:16

大家好，最近在研究页面的动态效果，可是，搞了半天还是搞砸了。。。没有动态，只有静态。记录备份一下！

html5 canvas 画直线箭头

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>整体感知训练</title>
	
	</head>
	<body>
		<div id="centerPoint" align="center">
			<p style="align-content: center;">整体感知训练</p>
	 		<canvas id="can" width="500px" height="500px" style="border:dashed 2px #CCC"></canvas>
		</div>
		
<script type="text/javascript"> 
window.onload = function(){
	//画出中心红点
    var can = document.getElementById("can");
    var cans = can.getContext('2d'); //得到画笔
    cans.beginPath();//开始绘制新路径
    //arc(x, y, radius, startAngle, endAngle, counterclockwise)：
    //以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。
    cans.arc(250,250,5,0,2*Math.PI);//参数1：左右移动；参数2：上下移动；参数3：大小；参数4：图形显示百分比
    cans.closePath();
    cans.fillStyle = 'red';
    cans.fill();
    //画线
    arrow_line("can",250,250,0,0,150,0);   //横  （向右）
    arrow_line("can",0,0,0,0,0,150);   //竖 (向下)  
    arrow_line("can",-150,0,150,0,0,0);   //横  （向左）
    arrow_line("can",150,-150,0,150,0,0);   //竖 (向上) 
  //画带箭头的线
	function arrow_line(canId,ox,oy,x1,y1,x2,y2){
	  //参数说明 canvas的 id ，原点坐标  第一个端点的坐标，第二个端点的坐标
	  var sta = new Array(x1,y1);
	  var end = new Array(x2,y2);
	  var canvas = document.getElementById(canId);
	  if(canvas == null)return false;
	  var ctx = canvas.getContext('2d');
	  //画线 
	  ctx.beginPath(); 
	  ctx.translate(ox,oy,0); //坐标源点 
	  ctx.moveTo(sta[0],sta[1]); 
	  ctx.lineTo(end[0],end[1]); 
	  ctx.fill();
	  ctx.stroke(); 
	  ctx.save();
	  //画箭头 
	  ctx.translate(end[0],end[1]);
	  //我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号
	  var ang=(end[0]-sta[0])/(end[1]-sta[1]);
	  ang=Math.atan(ang);
	  if(end[1]-sta[1] >= 0){
		ctx.rotate(-ang);
	  }else{
		ctx.rotate(Math.PI-ang);//加个180度，反过来
	  } 
	  ctx.lineTo(-5,-10); 
	  ctx.lineTo(0,-5); 
	  ctx.lineTo(5,-10); 
	  ctx.lineTo(0,0); 
	  ctx.fill(); //箭头是个封闭图形
	  ctx.restore();   //恢复到堆的上一个状态，其实这里没什么用。
	  ctx.closePath(); 
	}
}
	</script> 
	</body>
</html>

 

相关文章