LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

HTML5利用Canvas实现带刻度坐标轴画法

admin
2022年10月21日 11:38 本文热度 1034

参考书目:《HTML5 Canvas核心技术 图形、动画与游戏开发》,在HTML5 Canvas实现坐标轴画法:

zuobiao.html

<!DOCTYPE html>

<html>

  <head>

    <title>zb</title>

      <style>

        body {

            background: #dddddd;

        }

        #canvas {

            position: absolute;

            left: 0px;

            top: 0px;

            margin: 20px;

            background: #ffffff;

            border: thin solid #aaaaaa;

        }

      </style>

  </head>

  <body>

    <canvas id='canvas' width='600' height='600'>

      Canvas not supported

    </canvas>

    <script src='zb.js'></script>

  </body>

<html>


zb.js

var canvas = document.getElementById("canvas"),

    context = canvas.getContext("2d"),

    AXIS_MARGIN = 40,    //一个常量外边距

    AXIS_ORIGIN = {x:AXIS_MARGIN,y:canvas.height-AXIS_MARGIN},  //原点坐标

    AXIS_TOP = AXIS_MARGIN,        //纵轴顶点位置

    AXIS_RIGHT = canvas.width-AXIS_MARGIN,//横轴顶点位置

    HORIZONTAL_TICK_SPACING = 10,  //横轴间距

    VERTICAL_TICK_SPACING = 10,    //纵轴间距

    AXIS_WIDTH = AXIS_RIGHT-AXIS_ORIGIN.x,    //横轴长度

    AXIS_HEIGHT=AXIS_ORIGIN.y-AXIS_TOP,      //纵轴长度

    NUM_VERTICAL_TICKS = AXIS_HEIGHT/VERTICAL_TICK_SPACING,    //纵轴标尺的数量

    NUM_HORIZONTAL_TICKS = AXIS_WIDTH/HORIZONTAL_TICK_SPACING,  //横轴标尺的数量

    TICK_WIDTH = 10,//刻度长度

    TICKS_LINEWIDTH = 0.5,//刻度粗细

    TICKS_COLOR = "navy",//刻度颜色

    AXIS_LINEWIDTH = 1.0,//轴粗细

    AXIS_COLOR = "blue";//轴粗细

    //一个函数,由于绘制网格

function drawGrid(context,color,stepx,stepy){

    context.strokeStyle = color;

    context.lineWidth = 0.5;//格子粗细

    //格子横线

    for(var i = stepx + 0.5; i < context.canvas.width;i += stepx){

        context.beginPath();

        context.moveTo(i,0);

        context.lineTo(i,context.canvas.height);

        context.stroke();

    }

    //格子竖线

    for(var i = stepy + 0.5;i < context.canvas.height;i +=stepy){

        context.beginPath();

        context.moveTo(0,i);

        context.lineTo(context.canvas.width,i);

        context.stroke();

    }

}

//绘制坐标轴

function drawAxes(){

    context.save();

    context.strokeStyle = AXIS_COLOR;

    context.lineWidth = AXIS_LINEWIDTH;

    drawHorizontalAxis();

    drawVerticalAxis();

    context.lineWidth = 0.5;

    context.lineWidth = TICKS_LINEWIDTH;

    context.strokeStyle = TICKS_COLOR;

    drawHorizontalAxisTicks();

    drawVertialAxisTicks();

    drawNumberals();

}

//绘制横坐标

function drawHorizontalAxis(){

    context.beginPath();

    context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);

    context.lineTo(AXIS_RIGHT,AXIS_ORIGIN.y);

    context.stroke();

}

//绘制纵坐标

function drawVerticalAxis(){

    context.beginPath();

    context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);

    context.lineTo(AXIS_ORIGIN.x,AXIS_TOP);

    context.stroke();

}

//绘制纵坐标标尺及刻度数

function drawHorizontalAxisTicks(){

    var deltaY,num=0;

    for (var i = 1;i<NUM_HORIZONTAL_TICKS;++i){

        context.beginPath();

        if(i%5===0){

            deltaY = TICK_WIDTH;

            text();

            num++;

        }else {

            deltaY = TICK_WIDTH/2;

        }

        context.moveTo(AXIS_ORIGIN.x + i*HORIZONTAL_TICK_SPACING,AXIS_ORIGIN.y - deltaY);

        context.lineTo(AXIS_ORIGIN.x + i*HORIZONTAL_TICK_SPACING,AXIS_ORIGIN.y + deltaY);

        context.stroke();

        function text(){

            context.font = "12pt Helvetica";

            context.fillText(num,AXIS_ORIGIN.x +(i-6)*HORIZONTAL_TICK_SPACING,AXIS_ORIGIN.y + 3*deltaY);

        }

    }

}

//横坐标标尺及刻度

function drawVertialAxisTicks(){

    var deltaX,num=1;

    for (var i=1;i<NUM_VERTICAL_TICKS;++i){

        context.beginPath();

        if(i % 5 === 0){

            deltaX = TICK_WIDTH;

            text();

            num++;

        }else{

            deltaX = TICK_WIDTH/2;

        }

        context.moveTo(AXIS_ORIGIN.x - deltaX,AXIS_ORIGIN.y - i*VERTICAL_TICK_SPACING);

        context.lineTo(AXIS_ORIGIN.x + deltaX,AXIS_ORIGIN.y - i*VERTICAL_TICK_SPACING);

        context.stroke();

        function text(){

            context.font = "12pt Helvetica";

            context.fillText(num,AXIS_ORIGIN.x - 3*deltaX,AXIS_ORIGIN.y - i*VERTICAL_TICK_SPACING);

        }

    }

}

drawGrid(context,"lightgray",10,10);

drawAxes();

效果如图:




该文章在 2022/10/21 11:38:50 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved