生活周遭的事、程式語言與網頁: 使用 HTML5 CANVAS fillText 方法製作一個封面的範例

想要製作一個封面嗎？本篇文章就是應用 HTML5 Canvas fillText() 方法來完成一個簡單的封面製作。範例程式碼如下：

<body>

var ctx0 = t0_canvas_2d . getContext("2d");

ctx0.fillStyle = "#cc8822";

ctx0.fillRect(0, 0, 800, 238);

ctx0.font = "48px Verdana";

ctx0.fillStyle = "#FF8904";

ctx0.fillRect(7, 7, 786, 5);

ctx0.fillRect(7, 225, 786, 5);

ctx0.fillStyle = "white";

ctx0.fillText("Canvas", 5, 76,168);

ctx0.fillStyle = "yellow";

ctx0.fillText("文字的一個例子", 192, 76,350);

ctx0.fillStyle = "blue";

ctx0.fillText("JavaScript", 540, 76,250);

ctx0.font = "35px Verdana";

ctx0.fillStyle = "#008000";

ctx0.fillText(" 本篇網頁構成要素為使用ＨＴＭＬ５", 0, 146,580);

ctx0.fillText(" Ｃａｎｖａｓ元素", 0, 201,295);

ctx0.fillStyle = "6F6A62";

ctx0.font = "20px Verdana";

ctx0.fillText("welcome", 690, 213,80);

</script>

</body>

生活周遭的事、程式語言與網頁