1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>10-canvas繪製資料點
title
>
6<
style
>7*
11canvas
16style
>
17head
>
18<
body
>
19<
canvas
width
="500"
height
="400"
>
canvas
>
20<
script
>
21//
1.拿到canvas
22let ocanvas
=document.queryselector(
"canvas");
23//
2.從canvas中拿到繪圖工具
24let octx
=ocanvas.getcontext("2d
");25//
3.定義變數儲存小方格的尺寸
26let gridsize =50
;27//4.拿到canvas的寬高
28let canvaswidth
=octx.canvas.width;
29let canvasheight
=octx.canvas.height;
30//
5.計算在垂直方向和水平方向可以繪製多少條橫線
31let row
=math.floor(canvasheight
/gridsize);
32let col
=math.floor(canvaswidth
/gridsize);
33//
6.繪製垂直方向的橫線
34for
(let i =0
; i
<
row; i++)
41//
7.繪製水平方向的橫線
42for
(let i =0
; i
<
col; i++)
4950
//1.計算座標系原點的位置
51let originx
=gridsize;
52let originy
=canvasheight
-gridsize;
53//
2.計算x軸終點的位置
54let endx
=canvaswidth
-gridsize;
55//
3.繪製x軸
56octx.beginpath();
57octx.moveto(originx, originy);
58octx.lineto(endx, originy);
59octx.strokestyle ="
#000";
60octx.stroke();
61//
4.繪製x軸的箭頭
62octx.lineto(endx -10
, originy +5
);63
octx.lineto(endx -10
, originy -5
);64
octx.lineto(endx, originy);
65octx.fill();
6667
//5.計算y軸終點的位置
68let endy
=gridsize;
69//
3.繪製y軸
70octx.beginpath();
71octx.moveto(originx, originy);
72octx.lineto(originx, endy);
73octx.strokestyle ="
#000";
74octx.stroke();
75//
4.繪製x軸的箭頭
76octx.lineto(originx -5
, endy +10
);77
octx.lineto(originx +5
, endy +10
);78
octx.lineto(originx, endy);
79octx.fill();
8081
//1.拿到伺服器返回資料
82let list =[
83,87,
91,95,
99];
100let dotlocation
=104
let dotsize =20
;105
/*106
// 2.繪製資料點
107octx.beginpath();
108octx.moveto(dotlocation.x - dotsize / 2, dotlocation.y - dotsize / 2);
109octx.lineto(dotlocation.x + dotsize - dotsize / 2, dotlocation.y - dotsize / 2);
110octx.lineto(dotlocation.x + dotsize - dotsize / 2, dotlocation.y + dotsize - dotsize / 2);
111octx.lineto(dotlocation.x - dotsize / 2, dotlocation.y + dotsize - dotsize / 2);
112octx.closepath();
113octx.fill();
114*/
115for
(let i =0
; i
<
list.length; i++)
124script
>
125body
>
126html
>
pychars繪製多條資料
usr bin envpython coding utf 8 import pandas as pd from pyecharts.charts import bar,pie,line 設定 from pyecharts import options as opts from pyecharts.r...
js壓縮工具1 0介面繪製
使用的是mfc，建立工程之後需要美化介面，因為在第乙個版本中沒想加入太多的內容，所以介面比較簡單。建立mfc的document工程 按照以下格式繪製頁面，工具都在右邊的工具欄上 然後使用skin 對其進行美化，skin 很好的使用了裝飾器模式，在原來的構件的基礎之上重新繪製畫面，並且可以顯示出各種風...
Qt QImage載入記憶體資料後繪製
如果我在記憶體中生成了乙個包含rgba各分量的顏色二維陣列colorarray，要怎樣通過qimage把這些資料顯示出來呢？qimage需要載入這些資料 1 通過qimage的建構函式 qimage const uchar data,int width,int height,format forma...