HTML5 Canvas 鋸歯状図のコード例_html5 チュートリアルのスキル

レンダリング:

ヒント: コードを HTML ファイルにコピーし、直接開いて効果を確認します。

実装コード:

コードをコピー

コードは次のとおりです:

<頭>


<スクリプトタイプ="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);
関数eventWindowLoaded(){
var x,y;
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

//ボックス
context.ストロークスタイル = '#00f'; context.lineWidth=10;
context.ストロークRect(0, 0, theCanvas.width-0, theCanvas.height-0);
context.fillStyle = "#00f";
for(x=5;x context.beginPath();
context.arc(x,5,5,0,Math.PI,false);
context.closePath();
context.fill();
context.beginPath();
context.arc(x,canvas.height-5,5,0,Math.PI,true);
context.closePath();
context.fill();
}
for(y=5;y context.beginPath();
context.arc(5,y,5,0,Math.PI*2,true);
context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}

<キャンバス id="キャンバス" 幅="300" 高さ="300">