本文爲 H5EDU 機構官方 HTML5培訓 教程，主要介紹：JavaScript強化教程 —— canvas
使用 strokeText():
使用 "Arial" 字體在畫布上繪製一個高 30px 的文字（空心）：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas - 漸變
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來設置Canvas漸變：
createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。
addColorStop()方法指定顏色停止，參數使用座標來描述，可以是0至1.
使用漸變，設置fillStyle或strokeStyle的值爲 漸變，然後繪製形狀，如矩形，文本，或一條線。
使用 createLinearGradient():
創建一個線性漸變。使用漸變填充矩形:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);