569day 繪製在畫布中心的一段文字 html

《2023年4月27日》【連續 569天】

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();

canvas繪製在畫布中心的一段文字

lang en charset utf 8 titletitle canvas style head width 600 height 400 canvas var mycanvas document.queryselector canvas var ctx mycanvas.getcontext ...

在畫布上實現正弦曲線和文字的繪製

在畫布上實現正弦曲線和文字的繪製 from tkinter import import math width 400 height 210 畫布的寬度和高度 origin x 2 origin y height 2 原點x，y scale x 40 scale y 100 x,y軸縮放倍數 end ...

6 在畫布上繪製的筆觸的路徑，邊界和其他屬性的結構

表示畫布檢視捕獲的繪圖資訊的結構。3struct pkstroke 表示在畫布上繪製的筆劃的路徑 邊界和其他屬性的結構。4struct pkstrokepath 一種結構，它捕獲筆劃的組成部分，並提供沿筆劃路徑查詢和插值點的方法。5struct pkstrokepoint 表示沿筆劃路徑的特定點的屬...