ホームページ > 記事 > ウェブフロントエンド > JavaScriptで正方形を描く方法
JavaScriptで正方形を描く方法
- 藏色散人オリジナル
- 2021-04-08 14:57:332162ブラウズ
JavaScript で正方形を描画する方法: 最初に HTML サンプル ファイルを作成し、次に Canvas タグを本文に追加し、次に JavaScript コードを入力するための script タグを head に追加します。最後に、draw メソッドを使用して正方形を描画します。 。 できる。
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('2d');
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('canvas');">
<h1>canvas中画矩形</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
JavaScript 上級チュートリアル]
以上がJavaScriptで正方形を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptで属性を削除する方法次の記事：JavaScriptで属性を削除する方法