이번에는 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('canvas'); 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('2d'); gloablCompositeOperation(context); }else{ console.log('浏览器不支持canvas,请更新浏览器!') } } 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中文网其它相关文章!
推荐阅读:
위 내용은 H5+Canvas 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

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

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

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

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


핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

WebStorm Mac 버전
유용한 JavaScript 개발 도구

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

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
