canvas直交座標系の描画

2017年3月17日

キャンバスを使用して直交座標系を描画するのは、実際には非常に簡単です。原点 (0, 0) が決まれば、他の点でも構いません。知っていればそこがスタート地点です！原点がわかったら、X 軸と Y 軸の方向に 2 本の直線を描くだけです (X 軸と Y 軸も相対的であり、これは純粋に個人の好みと実際のニーズによって異なります)。

これ以上の苦労はせずに、コードを見てみましょう:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas画直角坐标系和柱状图</title>
    </head>
    <body>
        <h1 id="canvas画直角坐标系及柱状图">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)
            }
        }

それでもグラフをより美しく見せたい場合は、shadowColor、shadowOffsetX、shadowOffsetY およびその他の関連プロパティを使用して影を設定できます。キャンバスによって提供されます。

同時に、柱の頂点を中心にして、柱とは少し違う色の楕円を描きます。

以上がキャンバスは直交座標系を描画しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

See all articles