캔버스에 직사각형을 그립니다.

직사각형을 그립니다. context.fillRect(x,y,width,height) 스트로크Rect(x,y,width,height)

에 대해 작성해 보면 이 내용을 이해할 수 있습니다. 나중에 변형해도 상관없습니다.) > 높이: 직사각형 높이

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>

제출하다 코드 재설정

자동운전