찾다
웹 프론트엔드H5 튜토리얼HTML5에서 Canvas를 사용하여 웃는 얼굴을 그리는 코드

이 글에서는 HTML5에서 Canvas를 사용하여 웃는 얼굴을 그리는 튜토리얼을 주로 소개합니다. Canvas를 사용하여 그리는 것은 HTML5의 기본 기능입니다. 필요하신 분들은 참고하시면 됩니다.

201557180008373.jpg (600×436)오늘은 Canvas( Canvas) 웹 기술과 문서 객체 모델(종종 DOM이라고 함)과의 연관입니다. 이 기술은 웹 개발자가 JavaScript를 사용하여 HTML 요소에 액세스하고 수정할 수 있도록 하므로 매우 강력합니다.

이제 여러분은 왜 JavaScript를 그렇게 대대적으로 사용해야 하는지 궁금하실 것입니다. 즉, HTML과 JavaScript는 상호 의존적이며 캔버스 요소와 같은 일부 HTML 구성 요소는 JavaScript와 독립적으로 사용할 수 없습니다. 결국 캔버스에 그림을 그릴 수 없다면 캔버스가 무슨 소용이 있겠습니까?

이 개념을 더 잘 이해하기 위해 샘플 프로젝트를 통해 간단한 웃는 얼굴을 그려 보겠습니다. 시작해 봅시다.
시작하기

프로젝트 파일을 저장할 새 디렉터리를 만든 다음 즐겨 사용하는 텍스트 편집기나 웹 개발 도구를 엽니다. 이 작업을 수행한 후에는 빈 index.html과 빈 script.js를 생성해야 하며 나중에 계속해서 편집할 것입니다.

201557180130749.jpg (600×415)
다음으로 index.html 파일을 수정해 보겠습니다. 프로젝트 코드 대부분이 JavaScript로 작성되므로 별 문제는 없습니다. HTML에서 해야 할 일은 캔버스 요소와 참조 script.js를 만드는 것입니다.

<!DOCTYPE html><body>
   <canvas id=&#39;canvas&#39; width=&#39;640&#39; height=&#39;480&#39;></canvas>
   <script type=&#39;text/javascript&#39; src=&#39;script.js&#39;></script>
</body></html>

설명하기 위해 , 그래서 본문을 통해 문서에 더 많은 요소를 추가할 수 있습니다. 이번 기회에 id 속성이 canvas인 640*480 캔버스 요소를 완성했습니다.

이 속성은 고유한 식별을 위해 요소에 문자열을 추가할 뿐입니다. 나중에 이 속성을 사용하여 JavaScript 파일에서 캔버스 요소를 찾습니다. 다음으로 JavaScript 언어 유형과 script.js 파일 경로를 지정하는 <script> 태그를 사용하여 JavaScript 파일을 참조합니다. <br/>Manipulate DOM</script>

Document Object Model이라는 이름처럼 다른 언어를 사용하여 인터페이스를 호출하여 HTML 문서에 액세스해야 합니다. 여기서 사용하는 언어는 JavaScript입니다. 이렇게 하려면 내장 문서 개체에 간단한 참조를 배치해야 합니다. 이 개체는 태그와 직접적으로 일치하며, 마찬가지로 요소에 액세스하고 이를 통해 변경 작업을 수행할 수 있기 때문에 전체 프로젝트의 기초가 됩니다.

var canvas = document.getElementById(&#39;canvas&#39;);

캔버스 요소를 정의하기 위해 id="canvas"를 어떻게 사용했는지 기억하시나요? 이제 document.getElementById 메소드를 사용하여 HTML 문서에서 이 요소를 가져오고 필요한 요소 ID와 일치하는 문자열을 전달하기만 하면 됩니다. 이제 이 요소를 얻었으므로 이를 사용하여 페인팅을 시작할 수 있습니다.

캔버스로 그림을 그리려면 캔버스의 맥락을 조작해야 합니다. 놀랍게도 캔버스에는 그리기를 위한 메서드나 속성이 포함되어 있지 않지만 해당 컨텍스트 개체에는 필요한 모든 메서드가 있습니다. 컨텍스트 정의는 다음과 같습니다.

var context = canvas.getContext(&#39;2d&#39;);

각 캔버스에는 프로그램의 목적에 따라 여러 가지 다른 컨텍스트가 있습니다. 2차원 컨텍스트만 있으면 스마일리를 만드는 데 필요한 모든 그리기 방법을 얻을 수 있습니다. 얼굴 .

시작하기 전에 컨텍스트에는 두 가지 색상 속성, 즉 획과 채우기에 대한 속성이 저장된다는 점을 알려드리고 싶습니다. 웃는 얼굴의 경우 채우기를 노란색으로 설정하고 브러시를 검은색으로 설정해야 합니다.

context.fillStyle = &#39;yellow&#39;;   
context.strokeStyle = &#39;black&#39;;

문맥에 맞는 색상을 설정한 후 얼굴에 원을 그려야 합니다. 안타깝게도 컨텍스트 내 원에 대해 미리 정의된 방법이 없으므로 소위 경로를 사용해야 합니다. 경로는 단순히 일련의 연결된 선과 곡선이며, 그리기가 완료되면 경로가 닫힙니다.

context.beginPath();   
context.arc(320, 240, 200, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();

에서는 이렇게 설명합니다. 우리는 컨텍스트를 사용하여 새로운 길을 시작합니다. 다음으로 점 (320, 240)에 반경 200픽셀의 호를 만듭니다. 마지막 두 매개변수는 호를 만들 초기 각도와 최종 각도를 지정하므로 0과 2 *Math.PI를 전달하여 완전한 원을 만듭니다. 마지막으로 컨텍스트를 사용하여 설정한 색상을 기반으로 경로를 채우고 그립니다.

스크립트 기능을 위해 경로를 닫을 필요는 없지만 웃는 얼굴의 새로운 눈과 입을 그릴 수 있도록 경로를 닫아야 합니다. 눈도 같은 방법으로 만들 수 있으며, 각 눈에는 더 작은 반경과 다른 위치가 필요합니다. 하지만 먼저 채우기 색상을 흰색으로 설정해야 한다는 것을 기억해야 합니다.

context.fillStyle = &#39;white&#39;;   
context.beginPath();   
context.arc(270, 175, 30, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();   
context.beginPath();   
context.arc(370, 175, 30, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();

위 내용은 모두 눈에 대한 코드입니다. 이제 입은 매우 유사하지만 이번에는 호를 채우지 않고 각도를 반원으로 구성합니다. 이렇게 하려면 시작 각도를 0으로 설정하고 끝 각도를 -1 * Math.PI로 설정해야 합니다. 브러시 색상을 빨간색으로 설정하는 것을 잊지 마십시오.

context.fillStyle = &#39;red&#39;;   
context.beginPath();   
context.arc(320, 240, 150, 0, -1 * Math.PI);   
context.fill()   
context.stroke();   
context.closePath();

축하해요

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요! Related Related Residentations :

js html5 캔버스 사진을 그리는 방법


html5 및 css3 코드 제품 정보의 3D 디스플레이를 구현하기위한 CSS3 코드


html5 캔버스는 픽셀 넓은 얇은 줄을 그리는 것을 구현합니다.

위 내용은 HTML5에서 Canvas를 사용하여 웃는 얼굴을 그리는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

html5为什么只需要写doctypehtml5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

因为html5不基于SGML(标准通用置标语言),不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明,用于告诉浏览器编写页面所用的标记的版本。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경