1.canvas中文教學https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
2、canvas預設寬高是300、150，為避免異常，最好使用顯示屬性添加而不透過css來加入寬高
3、在canvas標籤內部加入不支援canvas標籤的瀏覽器的說明
4、透過下面的js程式碼也能判斷瀏覽器是否支援canvas
var canvas = document ');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-uncode here
} else {
// canvas-uncode here
} else {
// canvas-uncode here
} else {
// canvas-uncode here
} else {
// canvas-uncode here
} else {
// canvas-un代碼 hereed code here 7、beginPath的作用用來開始一個新的路徑層，如果不加就表示在原來路徑層上繪製，下面兩段程式碼效果是完全不一樣的，第一段程式碼顯示兩條紅線，第二段程式碼顯示一條黑線和一條紅線
複製程式碼
程式碼如下:
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo (100.5,20.5);
複製程式碼
複製程式碼
程式碼如下: var ctx = document.getElementById('cvs').getContext('2d'); ctx.beginPath() ctx .moveTo(100.5,20.5); ctx.lineTo(200.5,20.5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(100.5,40. ctx.lineTo(200.5,40.5) ctx.strokeStyle = '#f00'; ctx.stroke();
8. パスを閉じる必要がない場合は、closePath を使用する必要はありません。fill を使用すると、パスは自動的に閉じられます。
9. 十分な忍耐力がある限り、サール曲線を使用して任意のグラフィックを描画できます。
10. Firefox では 2 次曲線にバグがあるため、3 次曲線は使用できません。二次曲線の代わりに使用できます
11. 画像 (PNG、GIF、JPEG など) をキャンバスに導入でき、他のキャンバス要素も画像のソースとして使用できます
12. 以下は、基本的なキャンバス イメージ描画コードです。ここで、image はイメージまたはキャンバス オブジェクト、x と y はターゲット キャンバス内の開始座標です
drawImage(image, x, y)
次のコードは画像のスケーリングを表し、幅と高さはズーム後のサイズを表します。
drawImage(image, x , y, width, height)
次のコードは画像の切り取りを表します。最初のパラメータは次のとおりです。他のものと同様に、どちらも画像または別のキャンバスへの参照です。他の 8 つのパラメータはそれぞれ、画像内のトリミングの開始 x 座標、画像内のトリミングの開始 y 座標、トリミング領域の幅、トリミング領域の高さ、描画位置の x 座標、y 座標を表します。描画位置の座標、描画グラフィックの幅、描画グラフィックの高さ、トリミング領域のサイズは異なる場合があります。この場合、描画グラフィックのサイズに合わせて拡大縮小されます。描画された画像
drawImage(image, sx, sy, sWidth, sHeight, dx , dy, dWidth, dHeight)
13. グラフィックの輪郭の色を設定するためにストロークスタイルが使用され、フィルスタイルが使用されます。塗りつぶしの色を設定します。 color には、CSS カラー値、グラデーション オブジェクト、またはパターン オブジェクトを表す文字列を指定できます。デフォルトでは、線と塗りつぶしの色は黒 (CSS カラー値 #000000) です。
14. 画像の透明度は、globalAlpha = 透明度値または rgba カラー値で表すことができます
15. lineWidth 属性は、1px の線幅を解決するために設定します。バグの問題、0.5 を使用
16 の解決方法 lineCap 属性の左端の行はデフォルトのボタンを使用します。ガイドラインと同じ高さになっていることに注目してください。中央のものは丸い効果で、線幅の半分の半径の半円が終点に追加されます。右側は正方形の効果で、端点
17 に線幅の半分の等しい幅の正方形が追加されています。 ここでも例として 3 つのポリラインを使用し、異なる lineJoin を設定します。それぞれの値。一番上のものはroundの効果で、角が丸く、円の半径は線の幅と同じです。中央と下の線はそれぞれベベルとマイターの効果です。値が miter の場合、線分は点で交差するまで接続の外側に延長されます。拡張効果は、
18 で導入される miterLimit 属性によって制限されます。キャンバスの状態の保存と復元にはパラメータがありません。キャンバスの状態は、現在の画面に適用されているすべてのスタイルと変換のスナップショットです。キャンバスの状態はスタックに保存されます。save メソッドが呼び出されるたびに、現在の状態がスタックにプッシュされて保存されます。復元メソッドが呼び出されるたびに、最後に保存された状態がヒープからポップされ、すべての設定が復元されます。
19.transform(1, 0, 0, 1, 0, 0) パラメーターは、それぞれ水平スケーリング、水平回転 (時計回り)、垂直回転 (反時計回り)、垂直スケーリング、水平方向オフセット、垂直オフセットを表します。
setTransform(1, 0, 0, 1, 0, 0) は、前の変換行列をリセットしてから新しい行列を構築することを意味します。パラメーター関数は上記と同じです。
rotate(angle) , (半径)。は 1 ラジアン、2πr/r=ラジアン、つまり 360=2π、つまり 1=π/180 に等しい)
20。アニメーションは実際には描画ボードを継続的にクリアします (clearRect())。 ) そして再描画します
