Heim > Artikel > Web-Frontend > Canvas zeichnet ein rechteckiges Koordinatensystem

Canvas zeichnet ein rechteckiges Koordinatensystem

迷茫Original: 2017-03-25 13:58:063133Durchsuche

LeinwandZeichnen eines rechteckigen Koordinatensystems

17. März 2017

Die Verwendung von Leinwand zum Zeichnen eines rechteckigen Koordinatensystems ist eigentlich recht einfach, solange der Ursprung ( 0, 0) Punkt, es können auch andere Punkte sein, solange man weiß, dass es der Ursprung ist! Sobald Sie den Ursprung kennen, zeichnen Sie einfach zwei gerade Linien in Richtung der X-Achse und der Y-Achse (die X-Achse und die Y-Achse sind ebenfalls relativ, dies hängt ausschließlich von Ihren persönlichen Vorlieben und tatsächlichen Bedürfnissen ab).

Schauen wir uns ohne weitere Umschweife einfach den Code an:

<!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>

Dann gibt es die Zeichenmethode des rechteckigen Koordinatensystems (wenn der Meister sieht, dass die Funktionen vollständiger sind und die Die Codemenge kann rationalisiert werden. Vielen Dank für Ihren Rat):

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)
     }

Dann gibt es die Methode zum Zeichnen des Balkendiagramms:

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)
            }
        }

Wenn Sie möchten, dass das Diagramm angezeigt wird Um schöner auszusehen, können Sie die von Canvas bereitgestellten Eigenschaften ShadowColor, ShadowOffsetX, ShadowOffsetY und andere verwandte Eigenschaften verwenden, um den Schatten festzulegen.

Zeichnen Sie gleichzeitig eine Ellipse mit einer etwas anderen Farbe als die Säule, wobei der Scheitelpunkt der Säule die Mitte bildet.

Das obige ist der detaillierte Inhalt vonCanvas zeichnet ein rechteckiges Koordinatensystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnungs-SpielkartenobjektNächster Artikel：HTML5-Spielframework cnGameJS-Entwicklungsaufzeichnungs-Spielkartenobjekt

In Verbindung stehende Artikel

Mehr sehen