캔버스 기본지식

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>  <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>

제출하다 코드 재설정

자동운전