当前位置:Gxlcms > html代码 > canvas画直角坐标系

canvas画直角坐标系

时间:2021-07-01 10:21:17 帮助过:45人阅读

canvas画直角坐标系

2017年3月17日

利用canvas画直角坐标系其实挺简单的,只要确定了原点(0,0)点,也可以是其他的点,只要自己知道那是原点就行!知道了原点再分别向X轴方向和Y轴方向画两条直线即可(X轴和Y轴也是相对的,这个纯看个人喜好和实际需求)。

闲话不多说直接看代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas画直角坐标系和柱状图</title>
    </head>
    <body>
        <h1>canvas画直角坐标系及柱状图</h1>
        <canvas id="canvas" width="600" height="400">如果您只看到了这句话,那么您的浏览器该升级换代了!</canvas>
             <!--canvas的宽高即可以设置成行内样式,也可以通过Js设置,不过建议设置成行内样式-->
        <script src="js/drawChart.js" type="text/javascript" charset="utf-8"></script>
        <!--为了表现与样式分离同时为了页面简洁,引入一个外部js文件-->
        <script type="text/javascript">
            var canvas=document.getElementById("canvas");
            var cxt = canvas.getContext("2d");
            //通过id获取canvas画布,并获得cxt画笔,canvas目前只支持2d效果,所以“2d”不能省;
              
            var arr = [16,15,20,21]//利用数组模拟柱状图的数据
            Coordinate(50,350);//自己写的一个直角坐标系
            ColumnChart1(50,350,arr);    //一个简单的柱状图函数     
            /*为了有个简单的动画效果,canvas绘制完成以后先将它隐藏,然后用jQuery的slideDown()方法淡入显示*/
            $("#canvas").hide();
            $("#canvas").slideDown(1000);    
        </script>
    </body>
</html>

然后就是直角坐标系的绘制方法(如果那位大神看到了功能更加完善,代码量可以更加精简的,请不吝赐教,谢谢):

function Coordinate(x,y){
        //x为横坐标起点,Y为纵坐标起点
              var originX = x;
               var originY = y;
             //设置原点的那个文字的样式,并绘制出来
               cxt.font = "2rem 微软雅黑";
               cxt.fillText("0",originX-10,originY+15);//此处-10和+15是为了调整字的位置

              cxt.strokeStyle = "black";//设置坐标系X轴Y轴的颜色,绘制线条用strockeStyle属性,绘制填充色块用fillStyle属性;
             cxt.lineWidth = 3;//设置线条粗细,这里为了方便看设置了3个像素,可以根据情况自行调整
           //开始绘制Y轴
     cxt.beginPath();//开启路径
             cxt.moveTo(originX,originY);//x轴与y轴的起点位置
             cxt.lineTo(originX,originY-320);//轴的终点位置,即X大小不变,只是改变了Y点位置(根据实际情况做调整);
             cxt.stroke();//将这条线绘制出来
          //画小箭头
           cxt.moveTo(originX,originY-320);//小箭头起点位置即为Y轴终点位置
            cxt.lineTo(originX+3,originY-310);//originX+3和originY-310是设置小箭头的终点位置,小箭头的大小和尖锐程度请自行摸索
            cxt.stroke();
            cxt.moveTo(originX,originY-320);
            cxt.lineTo(originX-3,originY-310);
           cxt.stroke();
          //画横坐标
     //绘制X轴和Y轴相似
          cxt.moveTo(originX,originY);
          cxt.lineTo(originX+450,originY);
          cxt.stroke();
         //画小箭头
         cxt.moveTo(originX+450,originY);
         cxt.lineTo(originX+440,originY-3);
        cxt.stroke();
         cxt.moveTo(originX+450,originY);
         cxt.lineTo(originX+440,originY+3);
         cxt.stroke();
         cxt.fillText("Y轴",originX-5,originY-325)
     }

然后就是柱状图的绘制方法:

function ColumnChart1(x,y,arr){
        //绘制之前先清空原有的柱状图所占区域
        cxt.clearRect(x,y,500,0);
        var arrColor = ["red","yellow","blue","purple","green","mauve"];//为了使每个柱子的颜色不一样,如果可以尽量用#******或rgb()方法设置颜色,因为我这样直接用单词有些浏览器对个别颜色不识别(头疼的IE)
        //请务必保持x,y值与坐标系的x,y值相同
        this.arr= arr;
        for (var i=0;i<arr.length;i++ ) {//for循环用来遍历数组内数据
                if(i==0){
                    var    originX = x+40;
                    var originY = y-1;
                }else{
                    var originX = i*70+80;
                    var originY = y-1;
                }
                cxt.beginPath();
                cxt.strokeStyle = arrColor[i];//设置线条颜色
                cxt.lineWidth = 20;//这里为了方便直接将线条的宽度设置为20,这样就可以模拟柱子
                cxt.moveTo(originX+(i+1)*20,originY);//柱子的顶点位置,这里因为数组内数字小,所以都乘十了,这样有利于小数字的表现
                cxt.lineTo(originX+(i+1)*20,originY-(arr[i]*10));//调整每根柱子的间距;
                cxt.stroke();    
                cxt.font = "20px 宋体"
                cxt.fillText(arr[i],originX+(i+1)*20-10,originY-(arr[i]*10+3));
                //文字的绘制
                cxt.font = "13px 宋体"
                cxt.fillText("第"+(i+1)+"季度业绩",originX+(i+1)*20-35,originY+20)
            }
        }

如果还想图表看起来更加美观,可以用canvas提供的shadowColor、shadowOffsetX、shadowOffsetY等相关属性设置阴影。

同时以柱子的顶点为圆心画一个颜色略异于柱子的椭圆即可。

以上就是canvas画直角坐标系的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行