이번에는 H5+Canvas 사용 사례에 대해 자세히 설명드리겠습니다. H5+Canvas 사용 시 주의사항은 무엇인가요?
<canvas id='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(); --->有绘制了一个圆形的剪辑区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas之globalCompositeOperation</title>
<style type="text/css">
body{
background-color: #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 50px auto;border:1px solid #ccc; background-color: #FFF"></canvas>
</body>
<script type="text/javascript">
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>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 H5+Canvas 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
