HTML5繪製實心的文字

2021-07-08 10:49:24 字數 586 閱讀 4140

html5繪製實心的文字

1、設計原始碼

2、實現結果

3、原始碼說明

(1)建立乙個畫布,設定寬度和高度

(2)獲取到元素

var canvas = document.getelementbyid("canvas");
(3)建立context物件

var ctx = canvas.getcontext("2d");
(4)設定繪製文字的字型和字型大小

ctx.font = "40px 微軟雅黑";
(5)在畫布上繪製實心的文字,其中三個引數含義是:第乙個是繪製的文字,第二個是繪製文字橫座標起始座標,第三個是縱座標的起始座標

ctx.filltext("html5",200,200);

HTML5繪製實心的文字

html5繪製實心的文字 1 設計原始碼 2 實現結果 3 原始碼說明 1 建立乙個畫布,設定寬度和高度 2 獲取到元素 var canvas document.getelementbyid canvas 3 建立context物件 var ctx canvas.getcontext 2d 4 設定...

HTML5繪製顏色漸變

繪製線性漸變要用到 createlineargradient,方法如 createlineargradient xstart,ystart,xend,yend xstart為漸變起始地點的橫座標,ystart為漸變起始地點的縱座標,xend為漸變結束地點的橫座標,yend為漸變起始地點的縱座標。繪製...

html5繪製小球波形運動

var canvas document.getelementbyid ballbroad var context canvas.getcontext 2d 角度var angle 0 y步長var speedy 0.1 x步長var speedx 3 重新整理頻率 var frames 1000 6...