(4日目)HTML 5のCanvasグラフィック描画:グラフィック、moveTo&lineTo&beginPath&closePath、ベッセルカーブ、グラデーション、ズーム移動回転およびコンテキスト状態保存および復元
1723 ワード
CanvasグラフィックペイントAPIリファレンスはパス (円形の場合)円形パス x:円心X座標; y:円心Y座標; radius:円半径; startAngle:開始アーク、一般的に0;状況によって決まる. endAngle:終了弧度、 anticlockwise:オプション値;デフォルトはfalse、すなわち時計回りに描画されます.trueの場合は、反時計回りに円弧を描きます. 経路
非整円を閉じる必要がない場合は、この方法を使用しないでください.そうでなければ、非整数円の終点から始点まで直線が描画されます.ブラシの描画スタイルを設定します( 図面の描画を開始する( .
ctx.beginPath()の作成を開始し、この方法によって前のグラフィックの繰り返し描画を回避する.ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)を作成2 * Math.PIは360°を表す.ctx.closePath()を閉じる:ペンポイントを現在のサブ経路の開始点に戻す方法;現在の点から開始点まで直線を描画しようとします.グラフィックが閉じられているか、点が1つしかない場合は、この方法は何もしません.非整円を閉じる必要がない場合は、この方法を使用しないでください.そうでなければ、非整数円の終点から始点まで直線が描画されます.
ctx.fillStyle、線幅ctx.strokeStyle、線幅ctx.lineWidth).ctx.fill()、スクライブctx.stroke())
"use strict"
window.onload = function() {
var canvas = document.getElementById("canvas");
if (canvas == null) {
return false;
}
// 2d
var ctx = canvas.getContext("2d");
for (var i = 1; i < 10; i++) {
// ； ，
ctx.beginPath();
// ;
ctx.arc(50 * i, 50 * i, 20 * i, 0, 2 * Math.PI, true);
// ;
ctx.closePath();
//
ctx.fillStyle = "rgba(255,0,0,0.25)";
//
ctx.fill();
//
ctx.strokeStyle = "#ff0";
//
ctx.stroke();
}
}