使用js画图之画切线

样例:http://www.zhaojz.com.cn/demo/draw9.html

代码如下:

//画切线
//point 圆外的一点
//dot 圆心
//r 半径
function drawCircleTangent(point, dot, r){
    //画辅助线-start
    var color = 'DarkRed'; //切线的颜色
    var color2 = "#ccc"; //其它辅助线的颜色
    drawLine(dot, [dot[0]+9*r,dot[1]], {color: color2}); // 延长圆心所在的水平线
    drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // 画出圆心所在的垂直线
    drawPoint({
        pw:2,ph:2,color:'DarkRed',point: [dot[0]+9*r,dot[1],'x']
    });
    drawPoint({
        pw:2,ph:2,color:'DarkRed',point: [dot[0],dot[1]-4*r,'y']
    });
    drawLine(point, [point[0],dot[1]], {color: color2}); // 画point到x轴的垂直线
    drawLine(point, dot, {color: color2}); // 连接point与dot
    drawLine([point[0]-2*r, point[1]], [point[0]+2*r, point[1]], {color: color2}); //画point所在的水平线
    //画辅助线-end
    //point.push('point');
    drawPoint({
        pw:2,ph:2,color:'DarkRed',point: point
    });
    //dot.push('centre');
    var r_square = Math.pow(r,2); // r的平方
    var point_v = point[1]-dot[1]; //point到x轴的距离的平方
    var point_h = point[0]-dot[0]; //point到y轴的距离的平方
    var c_square = Math.pow(point_v,2) + Math.pow(point_h,2); //point到圆心的距离的平方
    var c = Math.sqrt(c_square); //point到圆心的距离
    var sinA = Math.abs(point_v)/c; //sinA
    var cosA = Math.abs(point_h)/c; //cosA
    var b_square = c_square-r_square; //point到切点的距离的平方
    var b = Math.sqrt(b_square); //point到切点的距离
    var sinB = b/c; //sinB
    var cosB = r/c; //cosB
    //以圆心为坐标圆点,确定point所在的象限
    var quadrant  = 1; //默认值
    var pm_h = point_h == 0? point_h: point_h/Math.abs(point_h); //水平方向
    var pm_v = point_v == 0? point_v: point_v/Math.abs(point_v); //垂直方向
    var hv = pm_h*pm_v; //相乘,-1时point在一三象限,+1时point在二四象限,0时point在轴上
    switch(hv){
        case 1:
            if((pm_h+pm_v)==-2){
                quadrant = 2; //第二象限
            }else{
                quadrant = 4; //第四象限
            }
            break;
        case -1:
            if((pm_h-pm_v)==-2){
                quadrant = 3; //第三象限
            }
            break;
        case 0:
            if((pm_h+pm_v)==-1){ //point在x轴的负半轴或者y轴的正半轴时,断定point在第二象限
                quadrant = 2;
            }
            if((pm_h+pm_v)==1){ //point在x轴的正半轴或者y轴的负半轴时,断定point在第四象限
                quadrant = 4;
            }
            break;
        default:
    }
    var sinC = 0;
    var conC = 0;
    var sinD = 0;
    var conD = 0;
    switch(quadrant){
        case 1:
            sinC = cosB*cosA+sinB*sinA; //sinC = sin(90+(B-A)) = cos(B-A) = cosB*cosA+sinB*sinA
            conC = -(sinB*cosA-cosB*sinA); //cosC = cos(90+(B-A)) = -sin(B-A) = -(sinB*cosA-cosB*sinA)
            sinD = -(cosA*cosB-sinA*sinB); //sinD = sin(270-(A+B))
            conD = -(sinA*cosB+cosA*sinB); //conD = cos(270-(A+B))
            break;
        case 2:
            sinC = -(cosB*cosA-sinB*sinA); //sinC = sin(-90+(A+B))
            conC = sinA*cosB+cosA*sinB; //conC = cos(-90+(A+B))
            sinD = cosA*cosB+sinA*sinB; //sinD = sin(90+(A-B))
            conD = -(sinA*cosB-cosA*sinB); //conD = cos(90+(A-B))
            break;
        case 3:
            sinC = -(cosA*cosB+sinA*sinB); //sinC = sin(-90+(A-B))
            conC = -(sinA*cosB-cosA*sinB); //conC = cos(-90+(A-B))
            sinD = (cosA*cosB-sinA*sinB); 
            conD = sinA*cosB+cosA*sinB;
            break;
        case 4:
            sinC = cosA*cosB-sinA*sinB;
            conC = -(sinA*cosB+cosA*sinB)
            sinD = -(cosA*cosB+sinA*sinB); //sinD = sin(270+(A-B))
            conD = (sinA*cosB-cosA*sinB); //conD = cos(270+(A-B))
            break;
        default:
    }
    var tangentPointA = [point[0]+b*conC, point[1]+b*sinC]; //切点A位置
    drawLine(point, tangentPointA, {color: color}); //画出切线
    drawLine(dot, tangentPointA, {color: color2}); //连接圆点与切点
    //drawArc(point, 17, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.asin(sinC)*180/Math.PI, 0);
    var tangentPointB = [point[0]+b*conD, point[1]+b*sinD]; //切点B位置
    drawLine(point, tangentPointB, {color: color}); //画出切线
    drawLine(dot, tangentPointB, {color: color2}); //连接圆点与切点
    //drawArc(point, 27, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.asin(sinD)*180/Math.PI, 0);
    drawPoint({ //描切点
        pw:3,ph:3,color:'DarkRed',point: tangentPointA
    });
    drawPoint({ //描切点
        pw:3,ph:3,color:'DarkRed',point: tangentPointB
    });
    //画辅助弧
    //(quadrant ==1 ||quadrant==4?360:0)
    drawArc(point, b, 60, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.asin(sinC)*180/Math.PI-5);
}

(0)

相关推荐

  • 使用js画图之圆、弧、扇形

    半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆 复制代码 代码如下: //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){     var pstart = [dot[0]

  • 使用js画图之饼图

    使用js画图之饼图 饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 复制代码 代码如下: //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){     if(data && data.length > 0){         var accumulationAngleOfSlope = new Number(0); //累计偏移角

  • 使用js画图之正弦曲线

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html JS函数的声明: 复制代码 代码如下: //画正弦曲线 //dot 原点 //amplitude    振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palst

  • 使用JS画图之点、线、面

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 复制代码 代码如下: //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){     document.write("<span id='"+opts.point[0]+&q

  • JS画图(非VML)--兼容IE/FF

    Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. */ function circle(x,y,r){ //(x,y)圆心,r半径 var dotx,doty,radio; var Pi=Math.PI; makedot

  • JS实现简单的Canvas画图实例

    定义变量:[javascript] 复制代码 代码如下: var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"

  • 使用js画图之画切线

    样例:http://www.zhaojz.com.cn/demo/draw9.html 复制代码 代码如下: //画切线 //point 圆外的一点 //dot 圆心 //r 半径 function drawCircleTangent(point, dot, r){     //画辅助线-start     var color = 'DarkRed'; //切线的颜色     var color2 = "#ccc"; //其它辅助线的颜色     drawLine(dot, [dot[

  • JS拖动鼠标画出方框实现鼠标选区的方法

    本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作为上传头像时裁切选择图片,在头像裁切中使用广泛,鼠标在图片上拖动拉出一个方框,这个方框就代表着选区的功能,目前网页上已流行的一种操作.主要是依赖于JavaScript代码来实现. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

  • 纯JS 绘制数学函数

    绘图对象Plot,包含了JS画点,JS画线,JS画正弦sin,JS画余弦cos,tan,圆,多边形. 可设置原点位置,画笔颜色,画笔粗细,坐标线颜色. 其实原理很简单,用长1px宽1px的div模拟点,由点及线,由线及面. 贴上来权当相互学习,以免JS新手觉得js画图是多神秘的事情. JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /**

  • 详解python使用turtle库来画一朵花

    看了群主最后成像的图片,应该是循环了36次画方框,每次有10度的偏移. 当然不能提前看答案,自己试着写代码. 之前有用过海龟画图来画过五角星.奥运五环.围棋盘等,所以感觉不难. # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:wxh def run(): ''' 主方法 :return: None ''' import turtle length = 150 # 线段长度 angle = 45 # 角度 offset_angle =

  • JavaScript结合Canvas绘画画运动小球

    目录 1.实现思路 2.静态效果 3.总结 前言: canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使用canvas画随机运动小球. 1.实现思路 首先为了达到我们想要的效果,可以先创建一个构造函数. 给构造函数添加对应的属性和方法. 实例化出多个对象,并且保存在数组中. 遍历每个对象,实现画圆. 间隔修改每个球的x,y值. 先准备画布确定对应的宽高: <canvas id="canvas" wi

随机推荐