JavaScriptで正方形を描く方法

藏色散人
リリース: 2023-01-04 09:35:14
オリジナル
2186 人が閲覧しました

JavaScript で正方形を描画する方法: 最初に HTML サンプル ファイルを作成し、次に Canvas タグを本文に追加し、次に JavaScript コードを入力するための script タグを head に追加します。最後に、draw メソッドを使用して正方形を描画します。 。 できる。

JavaScriptで正方形を描く方法

#この記事の動作環境: Windows7 システム、javascript1.8.5&&html5 バージョン、Dell G3 コンピューター。

JavaScript を HTML に挿入して四角形を描画します

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas元素示例</title>
<script>
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext(&#39;2d&#39;);
context.fillStyle = "#eeefff";
context.fillRect(0,0,400,300);
context.fillStyle = "green";
context.strokeStyle = "red";
context.lineWidth = 1;
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
}
</script>
</head>
<body οnlοad="draw(&#39;canvas&#39;);">
<h1>canvas中画矩形</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
ログイン後にコピー

JavaScriptで正方形を描く方法

[推奨学習:

JavaScript 上級チュートリアル]

以上がJavaScriptで正方形を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート