찾다
웹 프론트엔드H5 튜토리얼html5 캔버스 그리기 튜토리얼(4) - 닫히지 않은 경로 및 그래디언트 채우기 방법_html5 튜토리얼 기술

그리는 방법에는 일반적으로 채우기와 스트로크 두 가지가 있습니다. 이전 기사에서는 이미 스트로크 방법에 대해 설명했습니다. 이번 기사에서는 캔버스에서 그래픽을 채우는 방법에 대해 설명합니다.
채우기는 fill()로 매우 간단하죠? 스트로크 스타일이 획 스타일을 나타내는 것처럼 fillStyle은 채우기 스타일을 나타냅니다.
ctx.fillStyle = 'Color'; 기본 채우기 스타일은 불투명한 검정색입니다.

질문: 닫히지 않은 경로를 채울 수 있나요?
그렇습니다. 캔버스는 현재 경로의 끝점에서 시작점까지 직접 연결한 다음 채웁니다. 사진과 같이:


그런데 마지막 문단은 획이 없는 것을 볼 수 있습니다.
이전 글에서는 선 4개로 정사각형을 그렸지만 캔버스도 그리 나쁘지 않고, 직접 직사각형을 그리는 기능도 없다는 점을 기억하세요. fillRect()를 사용하여 직사각형을 직접 채울 수 있습니다.

코드 복사
코드는 다음과 같습니다.

ctx.fillRect(x,y,width,height);

여기서 x와 y는 직사각형의 왼쪽 상단 모서리의 시작점 좌표를 나타냅니다. , 기억하다.
fillRect에 관해서는 스트로크Rect를 언급해야 합니다. 짐작하셨겠지만, 이는 직사각형을 직접 획을 긋는다는 의미입니다.
fillText와 스트로크텍스트도 있습니다. 여기서는 먼저 살펴보지 않겠습니다.

캔버스 채우기 그라디언트 색상
캔버스에서 그라디언트 색상도 선형 그라디언트와 방사형 그라디언트 두 가지 유형으로 나뉘며 생성 방법도 독립적입니다. 먼저 선형 그래디언트를 만드는 방법을 살펴보겠습니다.
선형 그라데이션 만들기 = createLinearGradient - 보세요, 여전히 매우 간단한 단어입니다. 그의 구문은 다음과 같습니다:
createLinearGradient(x1,y1,x2,y2)에는 4개의 매개변수가 있습니다! 너무 복잡해 보이지만 실제로는 매우 간단합니다. 이전에 말했듯이 평평한 세계의 한 지점은 x 좌표와 y 좌표에 의해 결정되기 때문입니다. 따라서 x1과 y1은 선형 그래디언트의 시작점 좌표를 나타내고 x2와 y2는 끝점 좌표를 나타냅니다.
이것의 장점은 대각선 선형 그래디언트를 만들고 싶을 때 매우 편리합니다. 하지만 먼저 수평 선형 그래디언트를 만들어 보겠습니다.
var Linear = ctx.createLinearGradient(100,100,200,100); 그래디언트가 생성된 것 같은데 채워볼까요? ————이 그라데이션은 비어 있고 색상이 없습니다.
그라디언트 막대에 색상을 추가하는 방법은 addColorStop(위치, 색상)입니다. 하지만 이 addColorStop은 브러시에 추가되는 것이 아니라 그라데이션을 담는 이전 변수에 추가된다는 점에 유의하세요. >

코드 복사코드는 다음과 같습니다.
var 선형 = ctx.createLinearGradient(100,100,200,100 );
linear.addColorStop(0,'#fff');
linear.addColorStop(0.5,'#f0f')
linear.addColorStop(1,'#333');

여기서는 3개의 addColorStop을 사용했습니다. 이는 그라디언트 막대에 3가지 색상을 추가하는 것을 의미합니다.

참고
: addColorStop의 위치 매개변수는 항상 0-1 사이의 숫자이며 소수점 이하 두 자리까지 가능하며 백분율을 나타냅니다. 그는 '3px'와 같은 매개변수를 받을 수 없습니다. 이때 그라디언트 색상을 채울 수 있지만 먼저 정의된 그라디언트를 fillStyle에 할당해야 합니다.


코드 복사 코드는 다음과 같습니다.
var 선형 = ctx.createLinearGradient(100,100,200,100)
linear.addColorStop(0,'#fff')
linear.addColorStop ( 0.5,'#f0f');
linear.addColorStop(1,'#333');
ctx.fillStyle = 선형; //채우기 스타일에 그라데이션 지정
ctx.fillRect(100,100,100,100 );
ctx.Stroke()



fillRect와 스트로크Rect는 독립적인 경로를 그립니다. 위 코드에서 볼 수 있듯이 fillRect 이후에 스트로크를 호출하면 방금 그린 사각형에 스트로크가 적용되지 않습니다.
테스트 후 매우 짜증나는 문제를 발견했습니다. 즉, 선형 그래디언트의 좌표가 전체 캔버스 범위를 기준으로 한다는 것입니다. 예를 들어, 여기에서 선형 그래디언트의 시작점은 100,100입니다. 0,0에서 직사각형을 그리고 이 그래디언트로 채우면 내 그래디언트 범위가 단순히 직사각형을 초과하기 때문에 채우기가 없음을 알 수 있습니다. .범위.
정말 치팅 설정이네요.

질문: 그라디언트 시작점 이전과 그라디언트 끝점 이후에 색상이 채워지나요?
그렇습니다. 시작점 이전의 색상이 시작 색상이고, 끝점 이후의 색상이 항상 끝 색상입니다.
종료 색상 종료 방법은 종료 색상 뒤에 투명한 종료 색상을 채워 넣으면 됩니다. 예:

코드 복사
코드는 다음과 같습니다.

linear.addColorStop (0.99,' #333');
linear.addColorStop(1,'rgba(51,51,51,0)')

이전 계획에 따라 빌드하겠습니다. 기울어진 선형 그래디언트를 시도해 보세요. createLinearGradient의 매개변수를 변경하세요.

코드를 복사하세요
코드는 다음과 같습니다.

var 선형 = ctx.createLinearGradient(100,100,200,200)

효과는 다음과 같습니다.

그럼 방사형 그래디언트(원형 그래디언트)를 시도해 보겠습니다. createLinearGradient와 유사하게 방사형 그래디언트를 생성하는 방법은 createRadialGradient이지만 해당 매개변수는 매우 다를 수 있습니다.
createRadialGradient(x1,y1,r1,x2,y2,r2) 여기서 x1,y1,x2,y2는 여전히 동일은 시작점과 끝점을 나타내지만 여기서 시작점과 끝점은 모두 원이고 x, y는 원의 중심 좌표입니다. 따라서 r1과 r2는 각각 시작 원의 반경과 끝 원의 반경입니다. 사진과 같이:


내 생각에는 방사형 그래디언트가 원이고 원의 중심이 시작점, 원의 반경이 끝점인 것 같습니다. 그런데 캔버스의 방사형 그라데이션이 실제로는 다릅니다. 시작점이 원이고 끝점이 원이므로 제가 이해한 것과는 다릅니다.
가장 단순한 것부터 시작합니다. 먼저 매우 규칙적인 방사형 그래디언트를 만듭니다. 즉, 그래디언트 원의 중심이 그래디언트의 시작점이 됩니다. 규칙적인 방사형 그래디언트 때문에 중심이 원의 중심이므로 편향을 피하도록 노력해야 합니다. 그럼 끝원의 중심이 시작원의 중심과 일치하도록 합시다.

코드 복사
코드는 다음과 같습니다.

var Radial = ctx.createRadialGradient (55, 55,10,55,55,55); //동일한 원 중심 좌표
radial.addColorStop(0,'#fff')
radial.addColorStop(0.5,'#ff0');
Radial.addColorStop(0.9,'#555');
radial.addColorStop(1,'#f00')


여기서 방사형 그래디언트 시작 원과 끝 원의 중심 좌표를 동일하게 설정하고 시작 원의 반경은 10, 끝 원의 반경은 55입니다. 최종 방사형 그래디언트 범위가 그려집니다. 는 너비와 높이가 110인 원입니다. 그라데이션 범위는 끝점 원의 범위를 기준으로 합니다.
(끝 원의 범위를 벗어난 색상이 여전히 있는 것을 볼 수 있습니다. 이 색상이 끝 색상입니다. 그러나 Radial.addColorStop(1.5,'#0f0′);을 사용하여 정의하려고 하면 그라디언트 범위를 벗어난 색상은 여전히 ​​오류가 발생합니다.
그렇다면 시작 원의 반경은 어떻게 사용됩니까? ——일반적인 방사형 그래디언트의 중심("변경 중심"이라고 부르겠습니다...)은 단지 점일 뿐이며 원이 되어서는 안 됩니다. 사실, 우리가 옳습니다. 이 시작점 원은 ​​점과 동일하지만 더 클 수도 있습니다.
시작 원의 반경을 끝 원의 반경에 가깝게 매우 크게 만듭니다.

코드 복사
코드는 다음과 같습니다.

var Radial = ctx.createRadialGradient(55,55,50,55,55,55) //매우 가깝습니다

다른 colorStop은 그대로 두고 그래픽은 이렇게 됩니다.


즉, 캔버스의 방사형 그라데이션의 시작 색상은 시작 원의 범위 외부에서 그려지며, 시작 원의 전체 색상이 시작 색상이 됩니다.
시작원의 반경을 0으로 설정했는데, 방사형 그래디언트의 '변화 중심'이 실제로는 점입니다.
대부분의 경우 매우 형식적인 방사형 그라데이션이 필요하지 않습니다. 대신 아래 그림과 같이 변화 중심이 오프셋되기를 원합니다.

이때 캔버스 방사형 그라데이션에서 두 원의 장점이 나옵니다. 시작점 원과 끝 원의 중심이 일치하지 않는 한 변화의 중심도 이동합니다.
var Radial = ctx .createRadialGradient(75,75, 0,55,55,55); 그러나 이때의 그라데이션 범위는 여전히 끝점 원의 범위입니다.
많은 사람들이 파괴적인 사고방식을 가지고 태어납니다. 예를 들어 여기에서 끝 원의 반경은 항상 시작 원보다 크지만, 반대라면 어떻게 될까요?

코드 복사
코드는 다음과 같습니다.

var Radial = ctx.createRadialGradient (75, 75,55,55,55,0);

테스트 후 오류가 보고되지 않지만 원래 내부에서 외부로의 그라데이션이 외부에서 외부로 변경되었습니다. 내부에. 이것은 좋은 용도입니다.


또 다른 문제가 있습니다. 시작 원의 중심을 오프셋하고 시작 원의 범위가 끝 원의 범위를 초과하는 경우

이때 무슨 일이 일어날까요?


아! ? 무슨 일이야? !
이런 현상은 시작점 원과 끝점 원이 부분적으로만 겹치는 경우에 발생합니다. 따라서 일반적인 방사형 그래디언트를 원할 경우 한 원이 다른 원을 완전히 감싸는지 확인하세요.
또한 그라데이션은 fillStyle에 할당할 수 있으므로 스트로크 스타일에도 할당할 수 있습니다. 당신은 효과를 알고 있습니다.
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Vue和Canvas:如何实现手写签名和手势识别功能Vue和Canvas:如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AM

Vue和Canvas:如何实现手写签名和手势识别功能引言:手写签名和手势识别功能在现代应用程序中越来越常见,它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架,搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能,并给出相应的代码示例。一、手写签名功能实现要实现手写签

Canvas的优势有哪些Canvas的优势有哪些Aug 17, 2023 pm 04:52 PM

canvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍:1、Canvas提供了丰富的绘图功能,可以绘制各种形状、线条、文本、图像等;2、Canvas在浏览器中直接操作像素,因此具有很高的性能;3、Canvas是基于HTML5标准的一部分,可以在各种现代浏览器上运行等等。

如何利用Vue和Canvas创建逼真的天气动态背景如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM

如何利用Vue和Canvas创建逼真的天气动态背景引言:在现代网页设计中,动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例,你将学习如何编写Vue组件和利用Canvas绘制不同天气场景,从而实现一个独特而吸引人的背景效果。步骤一:创建Vue项目首先,我们需要创建一个Vue项目。

canvas特效有哪些canvas特效有哪些Aug 18, 2023 pm 04:12 PM

canvas特效有粒子效果、线条动画、图片处理、文字动画、音频可视化、3D效果、游戏开发等。详细介绍:1、粒子效果,通过控制粒子的位置、速度和颜色等属性来实现各种效果,如烟花、雨滴、星空等;2、线条动画,通过在画布上绘制连续的线条,创建出各种动态的线条效果;3、图片处理,通过对图片进行处理,可以实现各种炫酷的效果,如图片切换、图片特效等;4、文字动画等等特性。

canvas插件有哪些canvas插件有哪些Aug 17, 2023 pm 05:00 PM

canvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍:1、Fabric.js 是一个基于Canvas的开源 JavaScript 库,它提供了一些强大的功能;2、EaselJS是CreateJS库中的一个模块,它提供了一套简化了Canvas编程的API;3、Konva.js等等。

Vue和Canvas:如何实现视频播放器的定制化界面Vue和Canvas:如何实现视频播放器的定制化界面Jul 18, 2023 pm 02:49 PM

Vue和Canvas:如何实现视频播放器的定制化界面引言:在现代互联网时代,视频已经成为人们生活中必不可少的一部分。为了提供良好的用户体验,许多网站和应用程序都提供了自定义的视频播放器界面。本文将介绍如何使用Vue和Canvas技术实现一个定制化的视频播放器界面。一、前期准备在开始之前,您需要确保您已经安装了Vue和Canvas,并且熟悉这两种技术的基本用法

Vue和Canvas:如何实现图片的马赛克效果Vue和Canvas:如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PM

Vue和Canvas:如何实现图片的马赛克效果引言:随着Web技术的不断发展,越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中,常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果,为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理,使得整个图像变得模糊和抽象

如何使用Vue和Canvas开发网页截图工具如何使用Vue和Canvas开发网页截图工具Jul 19, 2023 am 08:36 AM

如何使用Vue和Canvas开发网页截图工具简介:随着互联网的发展,网页截图工具在我们的日常生活中扮演着越来越重要的角色。它们可以用来捕捉网页上的信息、制作教程或者分享你的见解。本文将介绍如何使用Vue和Canvas来开发一个简单的网页截图工具,以帮助读者了解如何实现这个常见但又有趣的功能。准备工作:在开始之前,我们需要准备好以下的开发环境和工具:安装Nod

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를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

맨티스BT

맨티스BT

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

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전