Html5中的Canvas做出来的特效就是牛逼，分享给大家欣赏一下。
直接贴代码，保存即可查看效果。已亲测：
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <title>孙悟空</title> <style> body{text-align:center;padding-top:3em;} </style></head><body> <canvas width="650" height="478"></canvas> <script> (function(){ var cvs=document.querySelector("canvas"), g=cvs.getContext("2d"); g.lineWidth=2; //右臂 g.beginPath(); g.strokeStyle="#DE821B"; g.fillStyle="#FFDE00"; g.moveTo(261,337); g.quadraticCurveTo(268,328,287,320); g.lineTo(323,357); g.quadraticCurveTo(281,415,243,377); g.closePath(); g.fill(); g.stroke(); //身体 g.beginPath(); g.strokeStyle="#DE821B"; g.fillStyle="#FFDE00"; g.moveTo(86,265); g.quadraticCurveTo(33,267,15,292); g.lineTo(52,339); g.quadraticCurveTo(88,328,101,341); g.lineTo(92,336); g.quadraticCurveTo(88,338,81,347); g.bezierCurveTo(188,468,306,372,261,306); g.closePath(); g.fill(); g.stroke(); //衣带 g.beginPath(); g.fillStyle="#000000"; g.moveTo(251,330); g.quadraticCurveTo(241,369,139,384); g.quadraticCurveTo(231,400,273,343); g.closePath(); g.fill(); //右手 g.strokeStyle="#842C00"; g.fillStyle="#BA6830"; g.beginPath(); g.moveTo(15,291); g.bezierCurveTo(-16,339,31,348,51,339); g.fill(); g.stroke(); g.beginPath(); g.moveTo(51,339); g.quadraticCurveTo(65,295,15,291); g.closePath(); g.fill(); //左手 g.beginPath(); g.moveTo(287,320); g.bezierCurveTo(370,283,377,363,322,356); g.fill(); g.stroke(); g.beginPath(); g.moveTo(287,320); g.quadraticCurveTo(291,349,322,356); g.closePath(); g.fill(); //左脚 g.beginPath(); g.strokeStyle="#690203"; g.fillStyle="#000000"; g.moveTo(110,404); g.quadraticCurveTo(57,440,113,453); g.closePath(); g.fill(); g.stroke(); //右脚 g.beginPath(); g.moveTo(110,424); g.bezierCurveTo(58,465,117,498,173,463); g.closePath(); g.fill(); g.stroke(); //裙角 g.beginPath(); g.strokeStyle="#949591"; g.fillStyle="#D1D2D4"; g.moveTo(255,424); g.quadraticCurveTo(242,436,222,437); g.quadraticCurveTo(223,426,219,425); g.quadraticCurveTo(231,417,255,424); g.fill(); g.stroke() g.closePath(); //左腿 g.beginPath(); g.strokeStyle="#650300"; g.fillStyle="#ED1B24"; g.moveTo(211,404); g.quadraticCurveTo(245,467,166,467); g.closePath(); g.fill(); g.stroke(); //右腿 g.beginPath(); g.moveTo(62,364); g.quadraticCurveTo(45,427,127,433); g.quadraticCurveTo(130,457,170,463); g.quadraticCurveTo(203,442,194,403); g.closePath(); g.fill(); g.stroke(); //裙摆 g.beginPath(); g.strokeStyle="#949591"; g.fillStyle="#FFFFFF"; g.moveTo(45,354); g.quadraticCurveTo(174,413,246,410); g.quadraticCurveTo(254,419,254,424); g.quadraticCurveTo(226,414,204,438); g.quadraticCurveTo(166,389,125,432); g.quadraticCurveTo(102,400,66,403); g.quadraticCurveTo(70,372,32,365); g.quadraticCurveTo(36,360,45,354); g.fill(); g.stroke(); g.closePath(); //裙 g.beginPath(); g.strokeStyle="#952C3D"; g.fillStyle="#EE707B"; g.moveTo(81,346); g.quadraticCurveTo(142,418,224,398); g.quadraticCurveTo(242,407,245,410); g.quadraticCurveTo(221,410,206,424); g.quadraticCurveTo(164,384,124,415); g.quadraticCurveTo(114,396,79,394); g.quadraticCurveTo(74,368,44,354); g.quadraticCurveTo(64,343,83,346); g.closePath(); g.fill(); g.stroke(); //黑斑 g.beginPath(); g.fillStyle="#000000"; g.moveTo(62,348); g.bezierCurveTo(59,365,90,390,86,353); g.lineTo(80,346); g.quadraticCurveTo(69,345,62,348); g.closePath(); g.fill(); g.beginPath(); g.moveTo(112,377); g.quadraticCurveTo(114,380,132,388); g.bezierCurveTo(114,397,88,386,112,377); g.closePath(); g.fill(); g.beginPath(); g.moveTo(205,402); g.quadraticCurveTo(212,401,226,398); g.bezierCurveTo(245,406,196,420,205,403); g.closePath(); g.fill(); //裙 g.beginPath(); g.strokeStyle="#952C3D"; g.fillStyle="#EE707B"; g.moveTo(106,395); g.quadraticCurveTo(160,363,193,412); g.quadraticCurveTo(160,389,125,414); g.fill(); g.stroke(); g.closePath(); g.beginPath(); g.fillStyle="#000000"; g.moveTo(148,383); g.quadraticCurveTo(164,384,177,396); g.bezierCurveTo(153,405,140,382,148,383); g.closePath(); g.fill(); //修整 g.beginPath(); g.moveTo(81,346); g.quadraticCurveTo(48,345,31,365); g.stroke(); g.closePath(); g.beginPath(); g.moveTo(228,399); g.quadraticCurveTo(257,415,254,424); g.stroke(); g.closePath(); //帽冠 g.beginPath(); g.strokeStyle="#DE821B"; g.fillStyle ="#DDA90C"; g.moveTo(40,137); g.bezierCurveTo(-8,152,-12,225,34,222); g.stroke(); g.closePath(); g.fill(); g.beginPath(); g.moveTo(38,137); g.bezierCurveTo(0,152,4,194,32,202); g.closePath(); g.fillStyle="#FFDE00"; g.fill(); //帽子外边 g.beginPath(); g.moveTo(290,53); g.quadraticCurveTo(250,17,135,51); g.bezierCurveTo(-5,105,5,270,102,268); g.stroke(); g.closePath(); g.fillStyle="#DDA90C"; g.fill(); g.beginPath(); g.fillStyle="#FFDE00"; g.moveTo(290,54); g.bezierCurveTo(258,19,115,35,72,95); g.bezierCurveTo(75,95,3,207,100,227); g.closePath(); g.fill(); //头巾 g.strokeStyle="#6B9C7F"; g.fillStyle="#B2DDC9"; g.beginPath(); g.moveTo(329,98); g.bezierCurveTo(294,15,147,72,110,203); g.fill(); g.stroke(); g.closePath(); g.beginPath(); g.fillStyle="#8DB2A4"; g.moveTo(247,62); g.lineTo(261,72); g.lineTo(280,70); g.lineTo(262,58); g.closePath(); g.fill(); //围巾 g.beginPath(); g.strokeStyle="#007CB2"; g.fillStyle="#4DC6E1"; g.moveTo(88,268); g.bezierCurveTo(132,277,173,358,214,318); g.quadraticCurveTo(185,337,185,352); g.bezierCurveTo(221,333,235,354,252,342); g.quadraticCurveTo(272,340,270,358); g.quadraticCurveTo(301,333,269,318); g.lineTo(280,325); g.quadraticCurveTo(292,297,165,227); g.fill(); g.stroke(); g.closePath(); g.beginPath(); g.lineTo(265,312); g.quadraticCurveTo(285,350,250,344); g.quadraticCurveTo(262,333,253,318); g.closePath(); g.fill(); g.stroke(); //头 g.beginPath(); g.strokeStyle="#842C00"; g.fillStyle="#BA6830"; g.moveTo(351,141); g.bezierCurveTo(313,-3,144,102,111,234); g.bezierCurveTo(118,247,147,327,260,321); g.stroke(); g.closePath(); g.fill(); //头阴影 g.beginPath(); g.fillStyle="#8B411F"; g.moveTo(316,83); g.quadraticCurveTo(341,103,349,135); g.quadraticCurveTo(338,120,337,119); g.quadraticCurveTo(330,103,311,83); g.fill(); g.closePath(); //头巾结 g.beginPath(); g.strokeStyle="#6B9C7F"; g.fillStyle="#B2DDC9"; g.moveTo(231,2); g.quadraticCurveTo(245,75,311,78); g.quadraticCurveTo(331,56,325,13); g.quadraticCurveTo(316,16,303,5); g.quadraticCurveTo(315,37,304,65); g.quadraticCurveTo(263,58,264,2); g.quadraticCurveTo(255,12,231,1); g.quadraticCurveTo(235,61,301,78); g.fill(); g.stroke(); g.closePath(); g.beginPath(); g.moveTo(287,57); g.quadraticCurveTo(296,65,295,78); g.quadraticCurveTo(315,85,315,80); g.quadraticCurveTo(306,49,281,53); g.stroke(); //g.closePath(); g.fill(); g.beginPath(); g.fillStyle="#8DB2A4"; g.moveTo(298,79); g.quadraticCurveTo(322,88,311,70); g.quadraticCurveTo(306,77,298,79); g.fill(); g.closePath(); //耳朵 g.beginPath(); g.strokeStyle="#842C00"; g.fillStyle="#BA6830"; g.moveTo(127,207); g.bezierCurveTo(62,164,36,281,135,268); g.stroke(); g.closePath(); g.fill(); g.beginPath(); g.fillStyle="#95411D"; g.moveTo(123,236); g.bezierCurveTo(92,203,64,250,122,236); g.closePath(); g.fill(); g.beginPath(); g.moveTo(127,238); g.lineWidth=1; g.strokeStyle="#842C00"; g.quadraticCurveTo(104,220,88,225); g.stroke(); //脸 g.beginPath(); g.moveTo(322,253); g.strokeStyle="#842C00"; g.fillStyle="#FFFFFF"; g.lineWidth=2; g.bezierCurveTo(276,235,376,197,348,135); g.quadraticCurveTo(303,73,237,81); g.quadraticCurveTo(203,93,170,129); g.quadraticCurveTo(143,223,231,268); g.bezierCurveTo(198,276,216,314,253,321); g.quadraticCurveTo(279,319,314,302); g.lineTo(317,294); g.quadraticCurveTo(338,285,316,257); g.closePath(); g.stroke(); g.fill(); //脸阴影 g.beginPath(); g.fillStyle="#CCD0D5"; g.moveTo(341,127); g.quadraticCurveTo(348,132,349,139); g.quadraticCurveTo(361,172,331,206); g.lineTo(329,201); g.quadraticCurveTo(358,159,339,126); g.fill(); g.closePath(); //眉毛 g.beginPath(); g.moveTo(279,137); g.strokeStyle="#096F30"; g.fillStyle="#5CA74A"; g.quadraticCurveTo(295,114,308,132); g.bezierCurveTo(312,142,307,143,312,162); g.bezierCurveTo(296,139,303,129,280,136); g.closePath(); g.stroke(); g.fill(); //眼眶 g.beginPath(); g.moveTo(279,137); g.strokeStyle="#B21D21"; g.fillStyle="#ED1B24"; g.lineWidth=1; g.moveTo(321,253); g.bezierCurveTo(302,242,309,234,331,207); g.bezierCurveTo(279,109,198,173,235,228); g.bezierCurveTo(259,269,290,239,325,271); g.quadraticCurveTo(324,265,316,258); g.fill(); g.stroke(); g.closePath(); //眼眶阴影 g.beginPath(); g.fillStyle="#B81214"; g.moveTo(328,202); g.quadraticCurveTo(305,229,310,240); g.quadraticCurveTo(311,229,332,207); g.fill(); g.closePath(); //眼睛 g.beginPath(); g.moveTo(271,252); g.strokeStyle="#FFDE00"; g.fillStyle="#FFFFFF"; g.bezierCurveTo(226,187,326,161,299,257); g.stroke(); g.closePath(); g.stroke(); g.fill(); //眼球 g.beginPath(); g.fillStyle="#49494B"; g.moveTo(292,255); g.bezierCurveTo(280,217,315,200,299,257); g.closePath(); g.fill(); g.beginPath(); g.fillStyle="#000000"; g.moveTo(299,251); g.bezierCurveTo(272,242,314,187,299,251); g.closePath(); g.fill(); g.beginPath(); g.fillStyle="#FFFFFF"; g.moveTo(298,229); g.bezierCurveTo(292,208,287,255,298,233); g.closePath(); g.fill(); //嘴巴 g.beginPath(); g.strokeStyle="#6DAE5E"; g.moveTo(310,267); g.bezierCurveTo(328,282,312,308,293,303); g.stroke(); g.strokeStyle="#842C00"; g.moveTo(321,292); g.bezierCurveTo(322,301,318,304,312,298); g.stroke(); g.fill(); g.closePath(); //右手阴影 g.beginPath(); g.fillStyle="#97441E"; g.moveTo(8,331); g.quadraticCurveTo(28,336,53,318); g.quadraticCurveTo(53,328,50,339); g.quadraticCurveTo(18,347,10,331); g.fill(); g.closePath(); g.beginPath(); g.moveTo(311,352); g.quadraticCurveTo(326,346,338,354); g.quadraticCurveTo(327,359,311,352); g.fill(); g.closePath(); g.beginPath(); g.fillStyle="#DDA80C"; g.moveTo(54,318); g.bezierCurveTo(77,303,137,338,107,347); g.quadraticCurveTo(94,324,51,339); g.quadraticCurveTo(54,326,54,318); g.fill(); g.closePath(); g.beginPath(); g.moveTo(107,347); g.quadraticCurveTo(104,350,88,353); g.lineTo(83,345); g.quadraticCurveTo(85,341,91,337); g.quadraticCurveTo(99,341,107,345); g.fill(); g.closePath(); g.beginPath(); g.moveTo(260,371); g.quadraticCurveTo(277,387,311,352); g.quadraticCurveTo(316,356,322,356); g.quadraticCurveTo(287,408,250,382); g.fill(); g.closePath(); //云 g.strokeStyle="#43AEDA"; g.beginPath(); g.moveTo(337,297); g.quadraticCurveTo(396,311,460,301); g.bezierCurveTo(442,296,453,278,462,283); g.moveTo(475,274); g.bezierCurveTo(487,299,447,284,464,265); g.bezierCurveTo(476,251,487,262,489,263); g.bezierCurveTo(464,227,533,216,533,243); g.bezierCurveTo(530,277,488,246,514,241); g.moveTo(529,228); g.bezierCurveTo(554,165,660,205,622,249); g.bezierCurveTo(667,267,620,326,585,278); g.bezierCurveTo(578,298,533,273,559,254); g.bezierCurveTo(587,244,581,282,565,270); g.moveTo(637,287); g.bezierCurveTo(672,316,624,331,614,323); g.moveTo(598,317); g.bezierCurveTo(595,337,566,309,592,306); g.bezierCurveTo(626,304,616,346,585,334); g.bezierCurveTo(570,353,536,346,530,324); g.bezierCurveTo(529,283,589,323,544,320); g.moveTo(516,317); g.bezierCurveTo(494,307,527,293,532,310); g.moveTo(528,327); g.bezierCurveTo(517,337,488,332,477,314); g.moveTo(480,311); g.quadraticCurveTo(425,319,337,297); g.stroke(); g.closePath(); g.beginPath(); g.fillStyle="#C7E6F4"; g.moveTo(480,311); g.quadraticCurveTo(425,319,337,297); g.quadraticCurveTo(425,315,473,306); g.fill(); g.closePath(); g.beginPath(); g.moveTo(606,202); g.quadraticCurveTo(642,216,623,250); g.quadraticCurveTo(615,244,601,248); g.quadraticCurveTo(632,228,606,202); g.fill(); g.closePath(); g.beginPath(); g.moveTo(630,254); g.bezierCurveTo(663,282,609,315,589,281); g.bezierCurveTo(589,292,650,299,630,254); g.fill(); g.closePath(); g.beginPath(); g.moveTo(646,296); g.quadraticCurveTo(659,325,614,324); g.lineTo(614,324); g.quadraticCurveTo(648,319,646,296); g.fill(); g.closePath(); g.beginPath(); g.moveTo(573,328); g.quadraticCurveTo(574,339,561,345); g.quadraticCurveTo(578,343,585,334); g.fill(); g.closePath(); g.beginPath(); g.moveTo(501,331); g.quadraticCurveTo(539,325,523,302); g.quadraticCurveTo(535,309,530,313); g.quadraticCurveTo(529,309,528,326); g.quadraticCurveTo(515,335,501,331); g.fill(); g.closePath(); })(); </script></body></html> 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?Mar 04, 2025 pm 12:32 PM공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?Mar 04, 2025 pm 02:39 PM이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.
& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.
& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전ByDDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전ByDDD
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
Dreamweaver Mac版
시각적 웹 개발 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
