lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
canvas
style
>
head
>
>
width
="600"
height
="400"
>
canvas
>
>
var mycanvas = document.
queryselector
('canvas');
var ctx = mycanvas.
getcontext
('2d');
/*1.在畫布的中心繪製一段文字*/
/*2.申明一段文字*/
var str =
'您吃-,了嗎'
;/*3.確定畫布的中心*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/*4.畫乙個十字架在畫布的中心*/
ctx.
beginpath()
; ctx.
moveto(0
, h /2-
0.5)
; ctx.
lineto
(w, h /2-
0.5)
; ctx.
moveto
(w /2-
0.5,0)
; ctx.
lineto
(w /2-
0.5, h)
; ctx.strokestyle =
'#eee'
; ctx.
stroke()
;/*5.繪製文字*/
ctx.
beginpath()
; ctx.strokestyle =
'#000'
;var x0 = w/2;
var y0 = h/2;
/*注意：起點位置在文字的左下角*/
/*有文字的屬性 尺寸 字型 左右對齊方式 垂直對齊的方式*/
ctx.font =
'40px microsoft yahei'
;/*左右對齊方式 (center left right start end) 基準起始座標*/
ctx.textalign =
'center'
;/*垂直對齊的方式 基線 baseline(top,bottom,middle) 基準起始座標*/
ctx.textbaseline =
'middle'
; = 'rtl';
ctx.
filltext
(str,x0,y0)
;/*6.畫乙個下劃線和文字一樣長*/
ctx.
beginpath()
;/*獲取文字的寬度*/
console.
log(ctx.
measuretext
(str));
var width = ctx.
measuretext
(str)
.width;
ctx.
moveto
(x0-width/
2,y0 +20)
; ctx.
lineto
(x0+width/
2,y0 +20)
; ctx.
stroke()
;script
>
body
>
html
>
滑鼠在canvas畫布上繪製凸多邊形
主要功能 1.滑鼠繪製凸多邊形 2.拖動多邊形頂點座標，可修改多邊形 2.凸多邊形內巢狀多個多邊形 3.判斷是否在監控區內 exports.install function vue,options 滑鼠按下 canvas.onmousedown function event else 滑鼠移動 ca...
569day 繪製在畫布中心的一段文字 html
2019年4月27日 連續 569天 var mycanvas document.queryselector canvas var ctx mycanvas.getcontext 2d 1.在畫布的中心繪製一段文字 2.申明一段文字 var str 您吃 了嗎 3.確定畫布的中心 var w ctx...
畫布canvas標籤，並且在畫布上畫簡單的形狀
今天整畫布，半天下來老是錯，結果 id c1 width 400 height 400 瀏覽器不支援 原來畫布的寬度和高度需要在標籤定義的時候確定，並且後面是不能帶有px這個單位的，比如 錯誤的定義 c1 ogc.fillstyle yellow ogc.fillrect 10,10 200 100...