이 글에서는 PHP 중국 네티즌들이 참고하고 학습하기 위해 HTML5 Canvas 그리기를 사용하는 방법을 자세히 설명합니다.
먼저 주의할 점: <canvas> 요소는 일부 이전 브라우저에서는 사용되지 않지만 Firefox 1.5+, Opera 9+, 최신 버전의 Safari, Chrome 및 Internet Explorer 9에서는 지원됩니다.
2D를 구해야 합니다. 그리기 전에 컨텍스트 렌더링
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');<span style="font-family: verdana, Arial, Helvetica, sans-serif;">캔버스는 상태에 따라 이미지를 그립니다. <code><span style="font-family: verdana, Arial, Helvetica, sans-serif;">Canvas是基于状态绘制图像的。</span>
기본 사용법:
1. 다음 두 가지 방법을 사용하여 경로를 정의합니다.
context.moveTo(x,y); //起点context.lineTo(x,y); //连线到终点
2. 여러 경로를 별도로 처리하려면 경로 정의의 시작과 끝 부분에 다음 두 가지 방법을 추가하여 구분해야 합니다.
context.beginPath(); context.closePath();
경로 스타일
context.lineWidth //定义线条宽度context.strokeStyle //定义线条颜色context.fillStyle //填充颜色context.stroke(); //绘制线条context.fill(); //绘制填充的颜色块
4. 원호 그리기
context.arc( centerx, centery, radius, //圆心坐标(x,y)以及半径r startingAngle, endingAngle, //开始的弧度值，和结束的弧度值 anticlockwise = false //可选参数，（false顺时针绘制）还是（true逆时针绘制）)
5.
context.rect(x, y, width, height); //设置矩形状态context.fill(); context.stroke();//或者context.fillRect(x, y, width, height); //绘制填充的矩形context.strokeRect(x, y, width, height); //绘制边框的矩形
6. fillStyle 및 스트로크 스타일의 속성값 형식
#FFF #333rgb(255,128,0) rgba(100,100,100,0.8) hsl(20,62%,28%) hsla(40,83%,33%,0.6) red
7. Line Cap: lineCap
은 선의 양쪽 끝 모양을 설정하는 데 사용됩니다. :
butt(default) //默认缺省round //圆头square //方头context.lineCap = "round";
8. 선 간의 교차 모양: lineJoin
세 가지 속성 값:
miter(default) //尖角bevel //斜接round //圆角context.lineJoin = "round";//当尖角很尖锐时，会出现lineJoin为bevel//此时跟另外一个属性有关：miterLimit，默认值是10//当在lineJoin为miter情况下，miterLimit大于10时，lineJoin会自动变成bevel
9. 이미지 변환 및 상태 저장
이미지 변환:
位移：translate(x,y); 旋转：rotate(deg); 缩放：scale(sx,sy);//保存当前图形状态:context.save();//恢复图形的所有状态：context.restore();//使用：context.save(); context.translate(x,y); context.restore();
10. 변환 행렬
a c e b d f0 0 1a水平缩放(1) b水平倾斜(0) c垂直倾斜(0) d垂直缩放(1) e水平位移(0) f垂直位移(0) 即：默认时，该变换矩阵为单位阵//设置变换矩阵transform(a,b,c,d,e,f);//重置变换矩阵setTransform(a,b,c,d,e,f);
11. 선형 그래디언트
12. 방사형 그래디언트
var grd = context.createLinearGradient(xstart,ystart,xend,yend);//开始坐标到结束坐标grd.addColorStop(stop,color);//stop为浮点数，开始坐标点到结束坐标点直线上，某个位置（0.0~1.0之间）//例：var skyStyle = context.createLinearGradient(0,0,800,800); skyStyle.addColorStop(0.0, 'black'); skyStyle.addColorStop(1.0, 'blue'); context.fillStyle = skyStyle;
13. 이미지 채우기
var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//开始圆心坐标到结束圆心坐标，以及半径grd.addColorStop(stop,color);//stop为浮点数，开始坐标点到结束坐标点直线上，某个位置（0.0~1.0之间）
14.
createPattern(img,repeat-style) //img为图片对象，repeat-style填充格式//其中repeat-style: no-repeat/repeat-x/repeat-y/repeat//例：var backgroundImage = new Image();
backgroundImage.src = "bg.jpg";
backgroundImage.onload = function(){var pattern = context.createPattern(backgroundImage,"repeat");
context.fillStyle = pattern;
context.fillRect(0,0,800,800);
}예:
createPattern(canvas,repeat-style) //canvas对象，repeat-style填充格式
15.동영상 채우기
window.onload=function(){ var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800; var context=canvas.getContext("2d"); var backCanvas=createBackgroundCanvas(); var pattern=context.createPattern(backCanvas,"repeat");
context.fillStyle=pattern;
context.fillRect(0,0,800,800);
} function createBackgroundCanvas(){ var backCanvas=document.createElement("canvas");
backCanvas.width=100;
backCanvas.height=100; var backContext=backCanvas.getContext("2d");
backContext.beginPath();
backContext.moveTo(15,15);
backContext.lineTo(50,50);
backContext.lineWidth=10;
backContext.strokeStyle="green";
backContext.stroke(); return backCanvas;
}
16. 또 다른 호 그리기 방법
createPattern(video,repeat-style) //video视频对象
예:
context.arcTo( x1,y1,x2,y2, //x1,y1,x2,y2两个坐标与起始点x0,y0组成一个角 radius //半径)
17. 베지어 곡선
베지어 2차 곡선
context.moveTo(x0,y0); context.arcTo(x1,y1,x2,y2,R);//起始点为(x0,y0)，该弧线与01线以及12线相切
베지어 3차 곡선
context.moveTo(x0, y0); //起始点context.quadraticCurveTo( x1, y1, //控制点坐标 x2, y2 //终点坐标)
18. 텍스트 렌더링
context.moveTo(x0, y0); //起始点context.bezierCurveTo( x1, y1, //控制点坐标 x2, y2, //控制点坐标 x3, y3 //终点坐标)
텍스트 가로 정렬:
context.font = "font-style font-variant font-weight font-size font-family"; //css字体样式，默认值："20px sans-serif"context.fillText(String, x, y, [maxlen]); //String字符串，和坐标位置，第四个为可选参数，这行文字的最长宽度context.strokeText(String, x, y, [maxlen]); font-style: normal (Default) italics (斜体字) oblique (倾斜字体) font-variant: normal (Default) small-caps (小写英文字母变成小的大写字母) font-weight: normal (Default) lighter bold bolder 100,200,300,400(normal) 500,600,700(bold) 800,900font-size: 20px (Default) 2em 150%font-family: 设置多种字体备选，支持@font-face
텍스트 세로 정렬:
context.textAlign = left right center
텍스트 측정항목:
context.textBaseline = top middle bottom alphabetic (Default) ideographic hanging
19. Shadow
context.measureText(String).width //获取渲染的字符串的宽度
20. 전역 방식:
context.shadowColor //阴影颜色context.shadowOffsetX //阴影的位移值context.shadowOffsetY context.shadowBlur //阴影模糊度
21. 현재 생성된 경로를 현재 클리핑 경로로 설정하는 방법
context.globalAlpha = 1 (Default) //全局透明度，默认不透明context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果，默认是(source-over)后面绘制的图像覆盖前面绘制的图像"source-atop" //后面绘制的图像覆盖前面绘制的图像，但后面的图像只显示重叠部分"source-in" //后面绘制的图像覆盖前面绘制的图像，但只显示重叠部分"source-out" //只显示后绘制的图像，而且重叠部分被切掉"destination-over" //前面绘制的图像覆盖后面绘制的图像"destination-atop" //前面绘制的图像覆盖后面绘制的图像，但前绘制的图像只显示重叠部分"destination-in" //前面绘制的图像覆盖后面绘制的图像，但只显示重叠部分"destination-out" //只显示前绘制的图像，而且重叠部分被切掉"lighter" //重叠部分颜色叠加融合"copy" //只显示后绘制图像"xor" //异或，重叠部分被挖空
fillRule
이 알고리즘은 점이 경로 내에 있는지 경로 외부에 있는지를 결정합니다. path잘라낼 Path2D 경로입니다.
void ctx.clip();void ctx.clip(fillRule);void ctx.clip(path, fillRule);
22. 영이 아닌 주변 원리 경로 방향
적용: 빈 종이 컷 효과
23 . 캔버스 상호 작용
ctx.arc(100, 100, 75, 0, Math.PI*2, false); ctx.clip(); ctx.fillRect(0, 0, 100,100);
24. Canvas의 컨텍스트 확장drawStar 메서드를 컨텍스트로 확장:
context.clearRect(x,y,width,height) //清空指定的区域context.isPointInPath(x,y) //点击检测函数，该点是否在当前规划路径内，当检测点包含在当前或指定的路径内，返回 true；否则返回 false//以下两个是获取鼠标点击在canvas坐标var x = event.clientX - canvas.getBoundingClientRect().left;var y = event.clientY - canvas.getBoundingClientRect().top;
25.
CanvasRenderingContext2D.prototype.drawStar = function(){}Canvas와 IE6, 7, 8 브라우저 간의 호환성 문제 감지
explorecanvas 라이브러리 소개:<canvas id="canvas">当前浏览器不支持Canvas，请更换浏览器再试</canvas>
26. 캔버스 그래픽 라이브러리: canvasplus || artisanJS || RGraph
code.google.com/p/canvasplusartisanjs.com roopons.com.au/wp-content/plugins/viral-optins/js/rgraph27. Canvas API 인터페이스 문서:
developer.mozilla.org/ zh-CN /docs/Web/API/CanvasRenderingContext2D위 내용은 HTML5 Canvas 그리기 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
