canvas教程

使用JS画图之点、线、面

字号+ 作者:H5之家 来源:H5之家 2018-01-17 09:00 我要评论( )

这篇文章主要介绍了使用js绘制几何图形的基础,绘制点、线、面,需要的朋友可以参考下


//画线
//pstart 起点
//pend 终点
//opts 参数
function drawLine(pstart, pend, opts){
    var ph = 1;
    var pw = 1;
    var color = "DarkRed";
    if(opts){
        color = opts.color ? opts.color: color;
    }
    var slope; //斜率
    var noSlope = false; //是否有斜率
    var hdist = pend[0] - pstart[0];
    var vdist = pend[1] - pstart[1];
    if(hdist != 0){
        slope =  Math.abs(vdist/hdist);  //计算斜率
    }else{
        noSlope = true; //当hdist=0时,直线没有斜率
    }
    var gapp = pw > ph ? ph : pw; //默认相邻点(左上角的像素点)间的距离
   
    var diagonal = Math.sqrt(Math.pow(hdist,2) + Math.pow(vdist,2)); //斜边长度
    var pn = parseInt(diagonal/gapp); //计算两点之间的点的数量
    if(pn < 3){pn=pn*3+1}; //如果点的数量小于3,则加大点数;为什么+1呢,是保证pn=0时至少有一个点
    var vgap = Math.abs(vdist)/pn; //相邻两点间的垂直距离
    var hgap = Math.abs(hdist)/pn; //相邻两点间的水平距离
    for(var i = 0; i< pn ; i++){
        //描点
        //hgap 相邻两点间的水平距离
        //vgap 相邻两点间的垂直距离
        //hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1) 相对于起点的水平偏移
        //vgap*i*(pend[1]<pstart[1]?-1:1) 相对于起点的垂直偏移
        //(pend[0]<pstart[0]?-1:1) 水平偏移方向
        //(pend[1]<pstart[1]?-1:1) 垂直偏移方向
        //(noSlope?0:1) 直线没有斜率时,水平偏移为0
        drawPoint({
            pw: pw,
            ph: ph,
            color: color,
            point: [(hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1)+pstart[0]),(vgap*i*(pend[1]<pstart[1]?-1:1)+pstart[1])]
        });
    }
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Android画图之Matrix(二)

    Android画图之Matrix(二)

    2018-01-17 13:03

  • canvas 从初级到XX 1# 部分非基础原生API的使用 [初级向]

    canvas 从初级到XX 1# 部分非基础原生API的使用 [初级向]

    2017-12-21 08:00

  • 怎么样使用Canvas绘制七巧板?

    怎么样使用Canvas绘制七巧板?

    2017-12-19 10:22

  • canvas画图,背景图片总盖住其他内容

    canvas画图,背景图片总盖住其他内容

    2017-12-16 10:11

网友点评