찾다
웹 프론트엔드H5 튜토리얼H5+Canvas 사용 사례에 대한 자세한 설명

이번에는 H5+Canvas 사용 사례에 대해 자세히 설명드리겠습니다. H5+Canvas 사용 시 주의사항은 무엇인가요?

<canvas></canvas>

캔버스 객체 컨텍스트 가져오기

var convas=document.getElementById('canvas');
var context=canvas.getContext('2d');

canvas는 상태 기반 그리기 환경입니다

직선 그리기

context.moveTo(x,y); 挪到笔头  
context.lineTo(x,y);按着画笔移动 (可以结合使用moveTo画不相连的线段)moveTo lineTo +moveTo lineTo
context.lineWith=10;    canvas是基于状态的,它不会创建一个直线对象。我们是对canvas上下文进行其他设置。读完所以设置后再绘图
context.strokeStyle='red';   这里还有其他的样式,不仅仅只有颜色。
context.stroke();
context.beginPath();  开始一个全新的canvas状态。之前对context的设置不会因为beginPath()而改变。新的设置会覆盖之前的设置
context.closePath();  使用线段绘制封闭的图形。可以去掉最后一个lineTo。closePath()会完成封闭这个动作。
context.fillStyle='green';
context.fill();  建议在进行完所有的设置之后再fill和stroke。不然fill会覆盖一部分的线段宽度,会由10变成5;

위 방법을 통해 다양한 그래픽을 캡슐화할 수 있는 함수입니다. 물론 캔버스는 많은 그래픽 API도 제공합니다

context.rect(x,y,width,height);绘制矩形的路径
context.fillRect(x,y,width,height);使用当前fillStyle绘制矩形 ( 颜色值可以使用css认同的所有颜色值包括rgb、rgba、hsl、hsla)
context.strokeRect(x,y,width,height);使用当前的strokeStyle绘制矩形

나중에 그린 그래픽이 이전 그래픽과 겹치면 후자가 전자를 덮어쓰게 됩니다.

그러나 fillStyle이나 획스타일의 색상 값에 특정 투명도가 있으면 가려진 부분이 계속 표시됩니다. 물론 겹치는 부분에 대한 다른 설정도 있습니다

선 속성:

lineWidth=10;
lineCap=''; 线段的2段的样式。butt(default)、round圆头、square方头。round和squqre比默认的长线条宽度的一半(5)的的长度。
lineJoin;线段与线段之间连接的样式。miter(default)、bevel(斜截)、round(圆头)

그래픽 변환

context.translate(x,y);移动坐标系
context.rotate(deg);旋转坐标系弧度制
context.scale(x,y);缩放坐标系--->需要注意的是,它也会对坐标数值,边框宽度属性等进行缩放,使用时需要谨慎选择。

팁: 변환 후 좌표계가 변경됩니다. 이전과 같을 것입니다. 그런 다음 context.translate(100,200)과 같이 이전 변환을 역방향으로 수행해야 합니다. 여전히 회전 변환을 수행해야 하는 경우 다른 context.translate(-100,-200) 작업을 수행해야 합니다. 이 작업은 매우 번거로운 작업입니다. Canvas는 변환 전에 캔버스 상태를 저장하는 간단한 방법을 제공합니다. 다음과 같이

context.save();
context.translate(x,y);
context.restore();

변환 전에 저장 작업을 수행한 다음 변환이 완료된 후 복원 작업을 수행하여 첫 번째 변환이 두 번째 변환에 영향을 미치지 않도록 이전 캔버스 상태를 복원합니다.

변환 행렬---캔버스는 더욱 발전된 변환 방법을 제공합니다.

contex.transform(a,b,c,d,e,f);   a、d-水平垂直缩放;b、c水平垂直倾斜;e、f水平垂直位移。
context.transform(1,0,0,1,0,0);基本矩阵,图形不发生任何变化。
当我们进行多次transform矩阵之后,标准系以及很混乱了,就需要下面这个方法了。
context.setTransform(a,b,e,d,e,f)。覆盖之前的transform设置,使用当前的transform设置,这样我们就很清楚当前具体transform变换。
context.fillStyle   ---填充样式  之  渐变
linearGradient:
var grd=context.creatLinearGradient(xStart,yStrart,xEnd,yEnd);   定义渐变色。在(xEnd,yEnd)点之后,填充的是最后的颜色值。
grd.addColorStop(stop,color);(stop的值,0-1的浮点数)   一般多个颜色断点配合使用,从而实现多颜色的渐变
context.fillStyle=grd;
context.fill();
radialGradient;
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1); 定义2个同心圆,(x0,y0)位置的半径r0
gra.addColorStop(stop,color);
context.fillStyle=grd;
context.fill();
createPattern
var pattern=context.createPattern(img || canvas || video , repeat-style);
Img的值可以使一张图片,也可以使一个canvas画布,甚至是一段video
repeat-style的值:no-repeat、repeat-x、repeat-y、repeat
context.fillStyle=pattern;
context.fill();

참고: 위의 내용은 fillStyle의 값(색상, 그라데이션, img, 캔버스, 비디오)을 설명합니다. 물론, 위의 스타일 값은 스트로크 스타일에도 적용됩니다.

호 그리기---arc

context.arc(centerX , centerY , radius , startAngle , endAngle , anticlockwise=false),

이 매개변수는 중심 좌표, 반경, 시작 및 끝 호, 시계 반대 방향인지 여부를 나타냅니다(기본값은 false)

그리는 몇 가지 방법을 캡슐화할 수 있습니다. 원, 원 선, 둥근 직사각형

contex.arcTo(x1, y1, x2, y2, radius);

현재 점(x0, y0)과 세 점(x1, y1) 및 (x2, y2)이 결합되어 형성됩니다. 각도, 두 변에 접하는 호는 arcTo 그리기의 효과입니다. 시작점은 현재점과 끝점(x2,y2)이다. 물론 이는 직선+호의 효과이고, 반경은 호의 반지름이다. 아래 그림과 같습니다.

적용 가능한 시나리오: 일반적으로 호를 그리려면 중심 좌표가 필요합니다. arcTo를 사용하면 원의 중심 좌표를 모르더라도 호를 그릴 수 있습니다.

문단 삽입:

캔버스를 사용하여 일부 그래픽 그리기 기능을 캡슐화할 때 일반적인 단계는 먼저 ctx.save() 및 ctx.restore()를 사용하여 기능의 시작과 끝을 래핑하는 것입니다. . 일부 스타일 설정, 변형 설정 및 그래픽 경로 그리기 기능을 만듭니다. 이 경로 함수는 ctx.beginPath() 및 ctx.closePath()로 시작하고 끝나며 일부 moveTo, lineTo, arc, arcTo 및 기타 메서드를 사용합니다.

Quadratic Bezier curvequadraticCurveTo(x1,y1,x2,y2);------http://tinyurl.com/html5quadratic

ctx.moveTo(x0,y0);
ctx.quadraticCurveTo(x1,y1,x2,y2);

이런 식으로 (x0,y0으로 섹션을 그립니다. )는 시작점이고, (x2, y2)는 끝점의 호이다. 그렇다면 그러한 호는 반드시 원호일 필요는 없습니다.

입방 베지어 곡선 bezierCurveTo(x1, y1, x2, y2, x3, y3)------http://tinyurl.com/html5bezier

ctx.moveTo(x0,y0);
ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)

这样就绘制一段以(x0,y0)为起点,(x3,y3)为终点的一段弧。 这么一段弧度可以绘制二次曲线不能完成的波浪弧线。

canvas中文字的绘制

ctx.font = "bold 40px Arial";
ctx.fillStyle=;
ctx.fillText(string ,x ,y,[maxlen]);在(x,y)位置绘制string 这个字符串
ctx.strokeStyle=;
ctx.strokeText(string,x,y,[maxlen]);在(x,y)位置绘制string 这个字符串,这个文字只有文字的边框,并没有填充

string 这个字符串如果设置了maxlen这个可选参数,那么这段文字就会强制压缩在maxlen这个宽度中。

当然,我们也可以设置fillStyle为一段纹理背景,在绘制文字,那么就会一段带纹理背景的文字。

文字细节部分

ctx.font="20px sans-serif"(默认),如果需要设置,只是这2个值
font:font-style、font-varient、font-weight、font-size、font-family(一个5个属性,和css基本相似)
font-style:normal、italic(斜体)、oblique(倾斜字体)。一般的web页面中italic和oblique是一样的,除非使用自己导入的倾斜字体。
font-varient:normal、small-caps(使用小型大写字母 替代 小写字母,大小和小写一样,只是他是大写的)
font-weight:lighter、normal、bold、bolder。一般浏览器,前2者一样,后2者一样。
font-size:px、em、%、large等
font-family:支持设置多种字体备用、支持@font-face、支持web安全字体
ctx.textAlign=left、center、right。

分别是以fillText(string,x,y);中x坐标为左边界、中间线、右边界绘制文字。(注意:left、right分别是指的边界)

ctx.textBaseLine=top、middle、bottom;

分别是以fillText(string,x,y);中x坐标为上边界、中间线、下边界绘制文字。同样也是边界。

另外还有alphabetic(默认,英文等)、ideographic(汉字,日语)、hanging(印度)三种值分别对应三类语言设置基准线

ctx.measureText(string).width-------根据对font设置之后,返回一个一段文字渲染的宽度

暂时不支持其他的属性如height等

阴影

ctx.shadowColor     --->CSS接受的颜色值均可
ctx.shadowOffsetX   --->x、y方向上的偏移    可为负值
ctx.shadowOffsetY
ctx.shadowBlur   --->模糊  0--> 越大越模糊

只需要设置shadowColor 和下面的任何一个属性,阴影就会出现,一般需要全部设置。

canvas绘制 均可设置shadow阴影

global属性  对全局设置

ctx.globalAlpha=1(default)   对全局设置透明度
ctx.globalCompositeOperation=   前后绘制图形重叠部分的样式     共有11种样式
"source-over"(default)  : 后绘制的图形覆盖前绘制的图形(默认)
"destination-over":前绘制的图形覆盖后绘制的图形

11种样式如下:

source-oversource-atopsource-insource-out
destination-over destination-atopdestination-indestination-out

lighter(颜色计算)copy(只保留后者)xor(清除重叠部分)

剪辑区域clip-----》使用刚刚规划的路径  为剪辑区域,那么我们看到,也只是这个剪辑区域的图形

ctx.beginPath();

ctx.arc(400,400,200,0,Math.PI*2);

ctx.clip();    --->有绘制了一个圆形的剪辑区域

nbsp;html>


	
	canvas之globalCompositeOperation
	


	<canvas></canvas>

<script>
	var canvas=document.getElementById(&#39;canvas&#39;);
	var WIDTH=1500;
	var HEIGHT=800;
	canvas.width=WIDTH;
	canvas.height=HEIGHT;
	var CIRCLES=[];
	var COLORS=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
	var NUMS=220;
	var SPEEDX=16;
	var SPEEDY=8;
	var RADIUS=25;
	window.onload=function(){
		if(canvas){
			var context=canvas.getContext(&#39;2d&#39;);
			gloablCompositeOperation(context);
		}else{
			console.log(&#39;浏览器不支持canvas,请更新浏览器!&#39;)
		}
	}
	function gloablCompositeOperation(context){
		context.clearRect(0, 0, WIDTH, HEIGHT);
		context.globalCompositeOperation="xor";
		context.globalAlpha=1;
		addCircles(CIRCLES,NUMS);
		paintCircles(context,CIRCLES);
		//setInterval(run(context),90);	  //setInterval、setTimeout不能直接传入带参数的方法调用。 一般有2中方法,1、使用匿名方法包装下。
		var interval=setInterval(function(){
			go(context);
		},90);	
	}
	/*function run(context){	//2、定义一个带参数,返回一个无参方法,在返回的无参方法中调用之前带参方法。
		return function(){
			go(context);
		}
	}*/
	function go(context){
		updateCirCles(CIRCLES);
		paintCircles(context,CIRCLES);
	}
	/*绘制一个圆对象*/
	function paintCircles(ctx ,CIRCLES){
		ctx.clearRect(0, 0, WIDTH, HEIGHT);
		for(var i=0 ; i<CIRCLES.length ; i++){
			ctx.beginPath();
			ctx.arc(CIRCLES[i].x,CIRCLES[i].y,CIRCLES[i].r,0,Math.PI*2);
			ctx.closePath();
			ctx.fillStyle=CIRCLES[i].color;
			ctx.fill();
		}
	}
	/*随机生成新的圆对象,加入到数组*/
	function addCircles(CIRCLES,num){		
		for(var i=0 ; i<num ;i++){
			var circle={};
			var radius=(1+Math.random())*RADIUS;
			var	cX=Math.random()*WIDTH;
			var	cY=Math.random()*HEIGHT;
			cX=cX<radius?radius:cX;
			cY=cY<radius?radius:cY;
			cX=cX>(WIDTH-radius)?(WIDTH-radius):cX;
			cY=cY>(HEIGHT-radius)?(HEIGHT-radius):cY;
			circle.x=cX;
			circle.y=cY;
			circle.r=radius;
			circle.color=createRandomRGBColor(); 
			circle.vX=(Math.floor(Math.random()*10)%2)==0?SPEEDX:(-1)*SPEEDX;
			circle.vY=(Math.floor(Math.random()*10)%2)==0?SPEEDY:(-1)*SPEEDY;
			circle.vX=circle.vX+Math.random()*6;
			circle.vY=circle.vY+Math.random()*3;
			CIRCLES[i]=circle;
		}
	}
	function updateCirCles(CIRCLES){
		for(var i=0 ; i<CIRCLES.length ; i++){
			var width=WIDTH-CIRCLES[i].r;
			var height=HEIGHT-CIRCLES[i].r;
			
			if(CIRCLES[i].x + CIRCLES[i].vX>width){
				CIRCLES[i].x=CIRCLES[i].x;
				CIRCLES[i].vX=CIRCLES[i].vX*(-1); 
			}else	if(CIRCLES[i].y + CIRCLES[i].vY>height){
				CIRCLES[i].y=CIRCLES[i].y; 
				CIRCLES[i].vY=CIRCLES[i].vY*(-1); 
			}else	if(CIRCLES[i].x + CIRCLES[i].vX<CIRCLES[i].r){
				CIRCLES[i].x=CIRCLES[i].x;
				CIRCLES[i].vX=CIRCLES[i].vX*(-1); 
			}else	if(CIRCLES[i].y + CIRCLES[i].vY<CIRCLES[i].r){
				CIRCLES[i].y=CIRCLES[i].y;
				CIRCLES[i].vY=CIRCLES[i].vY*(-1); 
			}else{
				CIRCLES[i].x=CIRCLES[i].x + CIRCLES[i].vX;
				CIRCLES[i].y=CIRCLES[i].y + CIRCLES[i].vY;
			}
		}
	}
	//随机生成rgb颜色值"#123abc"
	function createRandomRGBColor(){
		var color="";
		for(var i=0 ; i<6 ; i++){
			color+=COLORS[Math.floor(Math.random()*COLORS.length)];
		}
		return "#"+color;
	}
	//随机生成rgba颜色值"#123abc"
	function createRandomRGBAColor(){
		var color="";
		for(var i=0 ; i<3 ; i++){
			color+=Math.floor(Math.random()*255)+",";
		}
		return "rgba("+color+Math.random()+")";  //"rgba("+color+Math.random()+")"
	}
</script>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

通俗易懂解析JS原型与原型链

如何访问JS的对象属性与方法

위 내용은 H5+Canvas 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLH5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

H5는 html5와 동일합니까?H5는 html5와 동일합니까?Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

H5의 기능은 무엇입니까?H5의 기능은 무엇입니까?Apr 07, 2025 am 12:10 AM

H5 또는 HTML5는 HTML의 다섯 번째 버전입니다. 개발자에게 더 강력한 도구 세트를 제공하여 복잡한 웹 애플리케이션을보다 쉽게 ​​만들 수 있습니다. H5의 핵심 기능에는 다음이 포함됩니다. 1) 웹 페이지에 그래픽 및 애니메이션을 그리는 요소; 2) 웹 페이지 구조를 SEO 최적화에 명확하고 도움이되는 시맨틱 태그 등; 3) GeolocationApi 지원 위치 기반 서비스와 같은 새로운 API; 4) 호환성 테스트 및 폴리 필 라이브러리를 통해 크로스 브라우저 호환성을 보장해야합니다.

H5 링크를 수행하는 방법H5 링크를 수행하는 방법Apr 06, 2025 pm 12:39 PM

H5 링크를 만드는 방법? 링크 대상 결정 : H5 페이지 또는 응용 프로그램의 URL을 가져옵니다. HTML 앵커 작성 : & lt; a & gt; 태그 앵커를 만들고 링크 대상 URL을 지정합니다. 링크 속성 설정 (선택 사항) : 필요에 따라 대상, 제목 및 on 클릭 속성을 설정하십시오. 웹 페이지에 추가 : 링크가 나타나려는 웹 페이지에 HTML 앵커 코드를 추가하십시오.

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

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SecList

SecList

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

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.