キャンバスは長方形を描画します

長方形を描く context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

x: 長方形の始点の横座標(座標の原点は左上)キャンバスの隅、もちろん正確な元の原点です。後で変形について書くときに理解できるでしょう。今は関係ありません)

y: 長方形の始点の座標

width: 長方形の長さ

height: 長方形の高さ

  • HTMLページを作成し、キャンバスラベルを設定します

  • jsを書いてcanvas domオブジェクトを取得します

  • CanvasタグのDOMオブジェクトを通じてコン​​テキストを取得します

  • 描画スタイルと色を設定します

  • 長方形を描くか、長方形を塗りつぶします

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<canvas id="demoCanvas" width="500" height="500">
    <p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
    //第一步:获取canvas元素
 var canvasDom = document.getElementById("demoCanvas");
    //第二步:获取上下文
 var context = canvasDom.getContext('2d');
    //第三步:指定绘制线样式、颜色
 context.strokeStyle = "red";
    //第四步:绘制矩形,只有线。内容是空的
 context.strokeRect(10, 10, 190, 100);
    //以下演示填充矩形。
 context.fillStyle = "blue";
    context.fillRect(110,110,100,100);
</script>
</body>

</html>


学び続ける
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="demoCanvas" width="500" height="500"> <p>请使用支持HTML5的浏览器查看本实例</p> </canvas> <!---下面将演示一种绘制矩形的demo---> <script type="text/javascript"> //第一步:获取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步:获取上下文 var context = canvasDom.getContext('2d'); //第三步:指定绘制线样式、颜色 context.strokeStyle = "red"; //第四步:绘制矩形,只有线。内容是空的 context.strokeRect(10, 10, 190, 100); //以下演示填充矩形。 context.fillStyle = "blue"; context.fillRect(110,110,100,100); </script> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜