HTML5 の新機能: キャンバスタグを使用して複数の直線を描画します (effect_html5 チュートリアルスキルのスクリーンショット付き)-H5 チュートリアル-php.cn

次の例では、canvas タグを使用して複数の直線を描画します

コードをコピーします コードは次のとおりです: index_three ="text/javascript" src="js/index.js"/> お使いのブラウザはキャンバスをサポートしていませんタグ。 //Canvas オブジェクトを取得します var Canvas = document.getElementById("myCanvas"); //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します。 if(canvas.getContext){ // 対応する CanvasRenderingContext2D オブジェクトを取得します (ブラシ) var ctx = Canvas.getContext("2d"); //線の色 ctx.ストロークスタイル="#FF9933"; //線の幅 (ピクセル単位) ctx.lineWidth=10; //ラインの 2 レベルの形状 ctx.lineCap="round"; //キャンバスの座標系は次のとおりであることに注意してください。 Canvas キャンバスの隅が原点 (0,0) 、水平座標が右、垂直座標が下方向、単位はピクセル (px) です。 //新しい描画パスを開始します ctx.beginPath(); //直線の始点座標を (10,10) として定義します ctx.moveTo(50, 50) ; //直線の終点座標を (50,10) ctx.lineTo(350, 250); ctx.moveTo(50, 240); として定義します。 lineTo(360, 60); ctx.moveTo(50, 200); ctx.lineTo(300, 40); //座標点の順序に沿って直線を描画します。 ctx.ストローク(); //現在の描画パスを閉じます ctx.closePath(); /html>