HTML5繪圖之Canvas標籤繪製座標軸

阿新 • • 發佈：2019-01-14

因為最近在做資料的統計，需要表現在網頁上也查過一些外掛和一些繪圖語言，學習時間成本太高，所以用上了HTML5的Canvas標籤和JavaScript，可以很快的滿足我需要的繪圖需求

JavaScript中前兩句：

var canvas1=document.getElementById(“canvas1”); 
var context=canvas1.getContext(“2d”);

第一句獲取在HTML中的canvas
第二句得到canvas內建的繪圖物件，目前只支援2d
這兩句一般為通用格式

寫一個函式 function pageLoad()：

        var 
 x0=0.1*canvas1.width;
        var y0=0.9*canvas1.height;
        //the begin of the axis
        var widthAx=0.8*canvas1.width;
        var heightAx=0.8*canvas1.height;
        //the width and height of the axis system

上面是獲取到圓點的座標和座標軸的長寬度
Canvas的座標和openGL一致，右上角為原點

context.moveTo(0.1*canvas1.width,0.1*canvas1 
.height);
context.lineTo(0.1*canvas1.width,0.9*canvas1.height);
context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
context.moveTo(0.09*canvas1.width,0.115*canvas1.height);
context.lineTo(0.1*canvas1.width,0.1*canvas1.height);
context.lineTo(0.11*canvas1.width,0.115*canvas1.height);
context.moveTo(0.885*canvas1 
.width,0.89*canvas1.height);
context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
context.lineTo(0.885*canvas1.width,0.91*canvas1.height);
context.strokeStyle='black';
context.lineWidth=2;
context.stroke();
context.beginPath();

上面的程式碼中：
stroke()方法為Canvas的畫圖方法，繪製之前的定製好的路徑，每一次做好路徑要繪製
beginPath()用於開始一條新路徑，即準備畫新的圖，用新的畫筆的時候使用

var textX=[0,1,2,3,4];
for(var i=0;i<4&&x0<canvas1.width;i++){
    context.font="20pt Calibri";
    context.fillText(textX[i],x0,y0+20);
    x0+=0.2*canvas1.width;
}//X軸的數字

上面為X座標數字的顯示

context.arc(nowX0,y0-tempData[i]/40*canvas1.height*0.8,6,0,2*Math.PI);

畫圓函式context.arc為畫圓
context.fill()方法為把路徑填充
context.stroke()方法是把路徑描繪出來，圓環和圓心的區別

效果圖：

完整程式碼：

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body onload="pageLoad();">
    <div style="margin-top:30%">
        <canvas id="canvas1" width="500" height="500" ></canvas>
    </div>
<script type="text/javascript">
    var canvas1=document.getElementById("canvas1");
    var context=canvas1.getContext("2d");
    function pageLoad()
    {
        var x0=0.1*canvas1.width;
        var y0=0.9*canvas1.height;
        //the begin of the axias
        var widthAx=0.8*canvas1.width;
        var heightAx=0.8*canvas1.height;
        //the width and height of the axais system

        context.moveTo(0.1*canvas1.width,0.1*canvas1.height);
        context.lineTo(0.1*canvas1.width,0.9*canvas1.height);
        context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
        context.moveTo(0.09*canvas1.width,0.115*canvas1.height);
        context.lineTo(0.1*canvas1.width,0.1*canvas1.height);
        context.lineTo(0.11*canvas1.width,0.115*canvas1.height);
        context.moveTo(0.885*canvas1.width,0.89*canvas1.height);
        context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
        context.lineTo(0.885*canvas1.width,0.91*canvas1.height);
        context.strokeStyle='black';
        context.lineWidth=2;
        context.stroke();
        context.beginPath();
        var textX=[0,1,2,3,4];
        for(var i=0;i<4&&x0<canvas1.width;i++){

            context.font="20pt Calibri";
            context.fillText(textX[i],x0,y0+20);
            x0+=0.2*canvas1.width;
        }//X軸的數字
        var textY=[10,20,30,40];
        x0=0.1*canvas1.width;
        for(var i=0;i<4&&y0>0;i++)
        {
            y0-=0.2*canvas1.height;
            context.font="20pt Calibri";
            context.fillText(textY[i],x0-30,y0);

        }
        // drawData();
        var tempData=[32,22,30];
        y0=0.9*canvas1.height;
        var nowX0=x0+0.2*canvas1.width;
        context.arc(nowX0,y0-canvas1.height*0.8*tempData[0]/40,6,0,2*Math.PI);
        context.fillStyle="red";
        context.fill();
        context.beginPath();
        context.moveTo(nowX0,y0-canvas1.height*0.8*tempData[0]/40);
        for(var i=1;i<3;i++)
        {
            nowX0+=0.2*canvas1.width;
            context.lineTo(nowX0,y0-tempData[i]/40*canvas1.height*0.8);
            context.strokeStyle='red';
            context.stroke();
            context.beginPath();
            context.fillStyle="red";
            context.arc(nowX0,y0-tempData[i]/40*canvas1.height*0.8,6,0,2*Math.PI);
            //context.stroke();
            context.fill();
        }

    }

</script>

</body>
</html>

HTML5繪圖之Canvas標籤繪製座標軸

因為最近在做資料的統計，需要表現在網頁上也查過一些外掛和一些繪圖語言，學習時間成本太高，所以用上了HTML5的Canvas標籤和JavaScript，可以很快的滿足我需要的繪圖需求 JavaScript中前兩句： var canvas1=docume

html5 canvas 標籤繪製圖像且漸變色處理

html5 提供了很多很強大的功能，有些功能甚至可以擺脫伺服器的限制，減少對伺服器的訪問。canvas就是一個html5 新增的強大標籤。雖然功能有待完善，但已然可以解決一些網頁問題。今天主要講ca

matplotlib繪圖之中文標題、座標軸標籤亂碼問題

import matplotlib.pyplot as plt import matplotlib as mpl # 解決中文亂碼問題 #sans-serif就是無襯線字型，是一種通用字型族。 #常見

HTML5 高階之canvas 繪製圖形

canvas是HTML5中新增的標籤，像所有dom一樣，擁有自己的屬性、方法、和事件，其中就有繪圖的方法，js能夠呼叫它在網頁上完成繪圖。 canvas也是HTML5中最強大的特性之一，允許開發者使用動態和互動式方法在web上實現桌面應用程式的功能 canvas元素會

HTML5基礎之常用標籤以及標籤選擇器

在html中，標籤非常多，比如說列表，按鈕，圖片，文字等等，每一種標籤都有自己的使用方法以及相關的約束條件。具體的標籤可以直接到w3c的網站上檢視，這裡就簡單瞭解一下html5的標籤。一

Android繪圖之Canvas狀態儲存和恢復（7）

1 Canvas 狀態儲存和恢復前面講canvas概念理解時已經講解了save和savelayer，saveLayerAlpha函式，這裡進行canvas狀態儲存和恢復的詳細講解。 Canvas 呼叫了translate,scale,rotate,skew,concat or

Android繪圖之Canvas變換（6）

1 Canvas 與螢幕前面講解了Canvas的基本概念，Android繪圖之Canvas概念理解（5），對Canvas的概念進行了分析，但是沒有說明和螢幕的關係，Canvas不等於螢幕，螢幕不會動的，我們也無法對螢幕進行（平移，縮放等）操作，只能對Canvas進行操作，所以對

HTML之Canvas標籤及對應屬性、API詳解

聽說HTMl很火，自己也是借了幾本書，想深刻了解一下，翻書一看，又驚又喜，這不是在大學還學過半年呢嘛，畢業設計就是和這個網頁設計相關的，正好，前邊幾章大致翻閱一下複習，著重看了後邊的章節，今天看了一個canvas標籤，感覺挺有用的，其實知識都是一樣的，我現在在做iOS開發，

第四講：使用html5中的canvas標籤畫出一個球在指定區域內的運動

<html> <head> <title>小球在一個區域運動</title> <script src="../js/jscex.jscexRequire.min.js" type="text/javascrip

HTML5 Canvas繪圖之文字的渲染

文字渲染基礎 context.font=”bold 40px Arial” font屬性可以接受css的font屬性 context.fillText(string,x,y,[maxlen]) string指定位置，(x,y)指定位置 context

html5之canvas困惑在canvas標籤內需要設定了寬跟高，如果在css中設定同樣的寬跟高，畫出來的影象變形了？

<canvas class="cvs"></canvas>遇到的問題：如css 中設.cvs{width:500px;height:400px;}，也就是css改變了canvas的尺寸後，本來是可以畫出一個圓來，現在卻是一個扁平的圓，為什麼呀？如圖：什

html5之Canvas繪製刮刮卡

$(function(){ draw(); }) function draw(){ var c=document.getElementById("myCanvas");//定義一個遮罩層 var clientWidth = $(document).width();//獲取瀏覽器當前的

安卓鳥學Html5 之Canvas繪圖實踐一

前言預言帝喬布斯說HTML5將會改變網際網路的生態環境，自從2014年html5的火爆然後對移動開發者是一個衝擊，很多公司紛紛轉戰HTML5個人覺得對我們是一個考驗，然後有朋友去面試直接問會nodejs不，然後也有朋友轉成hybird開發了，說實在的

html5 canvas繪圖之fillStyle,strokeStyle的區別

html5 canvas繪圖之fillStyle,strokeStyle context.fillStyle(“”)：表示填充顏色 context.strokeStyle(“”

09、canvas標籤之繪製圖片與設定背景

繪製圖片圖片預載入，獲取圖片檔案 .onload中呼叫 .drawImage(img,x,y,w,h);繪製圖片(圖片,座標x,座標y,寬度,高度)設定背景 .createPatte

html5之canvas畫圖 1.寫字板功能

load har line client ctype 監聽事件 tle ntb csdn 寫字板事例：寫字板分析：1.點擊鼠標開始寫字（onmosedown）2.按下鼠標寫字（onmousemove）3.松開鼠標，停下寫字（

HTML5之canvas元素

矩形色值 body www rip white col ble script 定義和用法 fillStyle 屬性設置或返回用於填充繪畫的顏色、漸變或模式。默認值： #000000 JavaScript 語法： context.fillStyle=color|gr

HTML5 Canvas中繪製橢圓的幾種方法

1.canvas自帶的繪製橢圓的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是後來新增的，引數的意思：(起點x.起點y,半徑x,半徑y,旋轉的角度，起始角，結果角，順時針還是逆時針)

HTML5中的canvas繪製三個矩形

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>繪製三個矩形</title>

Android中Canvas繪圖之Shader使用圖文詳解

概述我們在用Android中的Canvas繪製各種圖形時，可以通過Paint.setShader(shader)方法為畫筆Paint設定shader，這樣就可以繪製出多彩的圖形。那麼Shader是什麼呢？做過GPU繪圖的同學應該都知道這個詞彙，Shader就

HTML5繪圖之Canvas標籤 繪製座標軸

相關推薦

HTML5繪圖之Canvas標籤繪製座標軸