先上效果圖 這裡以a4紙為例
首先 建立乙個canvas 定義寬、高
"canvas" width=
"740" height=
"1100"
>
const canvas = document.
getelementbyid
('canvas');
let ctx = canvas.
getcontext
('2d'
);
for
(let i =
0; i < n; i++
) ctx.
moveto
(list[y]
, starthei)
; ctx.
lineto
(list[y]
, starthei +30*
(i +1)
);}if
(istrue)
ctx.
moveto(8
, mty)
; ctx.
lineto
(726
, mty);}
ctx.
moveto(8
, starthei +
30* i)
; ctx.
lineto
(linewidth, starthei +
30* i)
;}
好了 廢話這麼多 還是直接上 全部**吧
ctx.font =`$
bold 黑體`
; ctx.fillstyle = c;
ctx.textalign = a;
ctx.textbaseline =
'middle'
; ctx.
filltext
(t, p[0]
, p[1]
);
有積分的 傳送門 小收一積分
當然沒有的 下面就是全部**
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
canvas<
/title>
<
/head>
* html,
body
<
/style>
"canvas" width=
"740" height=
"1100"
>
<
/canvas>
const canvas = document.
getelementbyid
('canvas');
let ctx = canvas.
getcontext
('2d');
/** * @writetxt: canvas 寫入字內容
* @param t 所需要寫入的文字
* @param s 寫入文字的樣式
* @param p 寫入文字的位置
* @param a 寫入文字對齊方式 預設 居中
* @param c 寫入文字顏色 預設 #000
*/const writetxt =
(t, s, p, a =
'center'
, c =
'#000'
)=>
ctx.font =`$
bold 黑體`
; ctx.fillstyle = c;
ctx.textalign = a;
ctx.textbaseline =
'middle'
; ctx.
filltext
(t, p[0]
, p[1]
);}/**
* @drawtable: 畫**
*/const
drawtable=(
)=>
/** * @drawline: 畫table線
* @param list **豎線x軸位置
* @param tlist **需要填寫文字 無文字 填 ''
* @param starthei 開始畫線的高度
* @param linewidth 橫線的長度
* @param n 行數
* @param txthei 文字位置調整
* @param istrue 是否為物資列表
*/const
drawline
=(list, tlist, starthei, linewidth, n, txthei =
14, istrue =
false
)=>
ctx.
moveto
(list[y]
, starthei)
; ctx.
lineto
(list[y]
, starthei +30*
(i +1)
);}if
(istrue)
ctx.
moveto(8
, mty)
; ctx.
lineto
(726
, mty);}
ctx.
moveto(8
, starthei +
30* i)
; ctx.
lineto
(linewidth, starthei +
30* i);}
if(istrue)
ctx.strokestyle =
'#5a5a59'
; ctx.
stroke()
;}writetxt
('出貨單'
,'20px',[
370,20]
)writetxt
('公司**:1232313131'
,'12px',[
12,48]
,'left'
)writetxt(,
'12px',[
698,48]
,'right'
)drawtable()
<
/script>
<
/body>
<
/html>
Canvas繪製基礎
繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...
Canvas 繪製文字
filltext text，x,y maxwidth 填充文字 stroketext text，x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設，文字對齊界線開始的地方 左對齊指本地從左向右，右對齊指本地從右向左 ...
Canvas 繪製直線
1.canvas繪圖是一種基於狀態的繪圖，繪圖的過程應該是先設定繪圖的狀態，再呼叫具體的函式進行繪製。例如繪製一條 100,100 到 700,700 的直線 context.moveto 100,100 設定起點狀態 context.lineto 700,700 設定末端狀態 context.li...