1.文字

Wthpy發表於2020-11-28

準備

,不提

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>W.html</title>
    <style>
        #canvas
        {
            position: fixed;
            left: -20px;
            top:-20px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" height="800" width = "1400"></canvas>
    <script src="w.js"></script>
</body>
</html>

在設定canvas的寬度與高度時，不能使用px字尾
(預設的canvas元素大小是300×150個螢幕畫素)

後續

// （1）使用document.getElementById()方法[3]來獲取指向canvas的引用。  

var canvas  =  document.getElementById("canvas"),

// （2）在canvas物件上呼叫getContext（'2d'）方法，獲取繪圖環境變數（注意，"2d"中的"d"必須小寫）。

context = canvas.getContext('2d');

// （3）使用繪圖環境物件在canvas元素上進行繪製。


context.strokeStyle = 'rgb(50,50,50)';
// context.font='38pt Arial';
// context.fillStyle='cornflowerblue';


// 清空畫布
context.clearRect(0,0,canvas.clientWidth,canvas.height); 

//  透明度
context.globalAlpha=0.5;


context.strokeText('Hello',50,50);

fillText()方法使用fillStyle屬性來填充文字中的字元，
strokeText()方法則使用strokeStyle屬性來描繪字元的輪廓線。
fillStyle與strokeStyle屬性可以是CSS格式的顏色、漸變色或是圖案。

fillText()與strokeText()都需要3個引數：要繪製的文字內容，以及在canvas中顯示文字的橫、縱座標。
在這裡插入圖片描述

第2次後續

var canvas  = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.strokeStyle = 'blue';

var pos = [];
// push() 方法可向陣列的末尾新增一個或多個元素,並返回新的長度
document.onclick = (e)=>{
    pos.push({x:e.pageX,y:e.pageY,n:50});
};

function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // array.forEach(function(currentValue, index, arr), thisValue)
    // forEach() 方法用於呼叫陣列的每個元素，並將元素傳遞給回撥函式。
    pos.forEach((item,i)=>{
       if(item.n>0){
           ctx.globalAlpha = item.n/50;
           ctx.strokeText("Hello,world",item.x,item.y);
           item.y--;
           item.n--;
       };
       else{
           delete pos[i];
       }
    })
    // setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式。
    setTimeout(
        ()=>{draw()}
        ,100);
}
draw();

做成了炫酷的特效
在這裡插入圖片描述

相關文章