캔버스 기본지식

context: context는 많은 그리기 기능을 캡슐화한 개체입니다. 이 개체를 얻는 방법은 var context =canvas.getContext("2d");

아마도 이 2d가 모든 사람의 상상력을 자극했을 것입니다. HTML5에서는 3D 서비스를 제공하지 않는다는 점을 알려드리게 되어 유감스럽습니다.

캔버스 요소로 이미지를 그리는 방법에는 두 가지가 있습니다. 즉,

context.fill()//Fill

입니다.

context.Stroke()//테두리 그리기

스타일: 그래픽을 그리기 전에 그리기 스타일을 설정합니다.

context.fillStyle//채워진 스타일

context.StrokeStyle//테두리 스타일

context.lineWidth//그래픽 테두리 너비

색상 표현:

색상 이름 직접 사용: "red" "green" "blue"

16진수 사용자 정의 색상 값: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255, 투명도)

입니다 GDI와 비슷해서 GDI를 사용해 본 친구들도 빨리 시작할 수 있을 것 같아요

다음 섹션

새로운 파일

<!DOCTYPE html>
<html>
<head> 
 <meta charset="utf-8"> 
 <title>php中文网</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>

제출하다 코드 재설정

자동운전

전체 화면