24个canvas基本专业知识小结

日期:2021-02-25 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

现把canvas的专业知识点总结以下,便于随时查阅。

1、填充矩形框 fillRect(x,y,width,height);

2、绘图矩形框边框 strokeRect(x,y,width,height);

3、擦除矩形框 clearRect(x,y,width,height);

4、填充款式 fillStyle="red"; 款式能够为色调、渐变色和图象。

5、描边款式 strokeStyle="red";

6、描边线条的宽度 lineWidth=4;

7、线条尾端样子 lineCap="butt"; butt(连接)/round(圆)/square(方),默认设置状况下是butt;

8、线条交叉款式 lineJoin="miter"; miter(尖角)/round(圆角)/bevel(斜角),默认设置尖角;

9、刚开始绘图相对路径 beginPath();

10、完毕相对路径 closePath(); 建立相对路径后,假如想绘图1条联接到相对路径起始点的线条,能够启用closePath();

11、绘图圆弧 arc(x,y,radius,startAngle,endAngle,true/false);

12、绘图弧线 arcTo(x1,y1,x2,y2,radius) 从上1点刚开始绘图1天弧线,到x2,y2为止,而且以给定的半径radius穿过x1,y1;

13、moveTO(x,y); 将制图游标挪动到(x,y),不画线

14、lineTo(x,y); 从上1点刚开始绘图1条平行线

15、2次贝塞尔曲线图: quadraticCurveTo(cx,cy,x,y); 从上1点刚开始绘图2次曲线图,到x,y为止,cx,cy做为操纵点。

16、3次贝塞尔曲线图: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 从上1点刚开始绘图2次曲线图,到x,y为止,cx1,cy1和cx2,cy2做为操纵点。

17、rect(x,y,width,height);从点x,y刚开始绘图矩形框,宽度和高宽比各自由width和height特定。这个方式绘图的是矩形框相对路径,而并不是单独样子。

18、绘图文字:

  (1) 填充文字:fillText("hello",x,y,width);width为可选的最大像素宽度,假如文字超过最大宽度,则文字会收拢以融入最大宽度。
  (2) 文字描边:strokeText("hello",x,y,width);width为可选的最大像素宽度。
  (3) 文字款式:font="bold 14px Arial";
  (4) 水平文字对齐:textAlign='start'; // start, end, left,right, center。默认设置值:start。以文本的起止点(x,y)为基点的纵轴开展对齐。
  (5) 竖直文字对齐:textBaseline='alphabetic'; //top, hanging, middle,alphabetic, ideographic, bottom。默认设置值:alphabetic。以文本的起止点(x,y)为基点的横轴开展对齐。
  (6) 文字的宽度:var text="hello"; var length=context.measureText(text);主要参数text为所必须绘图的文本

19、转换

  (1) rotate(angle):紧紧围绕原点转动图象angle弧度。
还可以应用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0);
  (2) scale(x,y):放缩图象。还可以应用transform(x,0,0,y,0,0);
  (3) translate(x,y):将座标原点挪动到x,y,实行这个转换以后,座标0,0会变为以前由x,y表明的点。还可以应用transform(1,0,0,1,x,y);
  (4) transform(<number>, <number>, <number>,<number>,x, y);
  (5) setTransform(<number>, <number>, <number>,<number>,x, y);将转换引流矩阵重设为默认设置情况,随后再启用transform();

20、图型组成


拷贝编码
编码以下:

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; 可选值如/* */内。
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over(默认设置值):
destination-over:在原来图型之下绘图新图型
source-in:新图型与原来图型作in运算,只显示信息新图型中与原来图型相重合的一部分
destination-in:原来图型与新图型作in运算,只显示信息新图型中与原来图型相重合的一部分
source-out:新图型与原来图型作out运算,只显示信息新图型中与原来图型不重合的一部分
destination-out:新图型与原来图型作out运算,只显示信息新图型中与原来图型不重合的一部分
source-atop:只绘图新图型中与原来图型重合的一部分和未被重合的原来图型
destination-atop:只绘图原来图型中被新图型重合的一部分和新图型的别的一部分
lighter:原来图型与新图型均绘图,重合一部分做加色解决
xor:只绘图新图型与原来图型不重合的一部分,重合一部分变全透明
copy:只绘图新图型
*/

21、绘图图型黑影


拷贝编码
编码以下:

context.shadowOffsetX=10; //黑影的横向位移量
context.shadowOffsetY=10; //黑影的纵向位移量
context.shadowColor='rgba(100,100,100,0.5)'; //黑影的色调
context.shadowBlur=7; //黑影的模糊不清范畴

22、绘图、平铺、剪裁图象


拷贝编码
编码以下:

context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh为源图象的被拷贝地区的起止座标和高宽比,dx,dy和dw,dh为拷贝后的地区的总体目标座标和高宽比。
context.createPattern(image,type);图象平铺,主要参数能够为:no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //剪裁作用

事例:


拷贝编码
编码以下:

image=new Image(); //建立Image目标
image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');//createPattern设定平铺实际效果,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //此方式的功效是,假如照片是较为大的互联网图象文档,避免图象所有装载结束才看见该图象,这样便可以1边装载1边绘图了。
drawImg(context,image);
}
function drawImg(context,image){
//绘图初始图象
context.drawImage(image,10,10,125,125);
//部分变大
context.drawImage(image,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(image,0,0,200,200);
}

23、储存、修复

contex.save();将当今情况储存到栈中。留意:储存的只是对绘图图型的设定和转换,不容易储存绘图图型的內容。
context.restore();从栈中取下以前储存的图型情况
能够运用的场所:
(1)图象或图型形变
(2)图象剪裁
(3)更改图型左右文时特性时:fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,
shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline

24、线形渐变色


拷贝编码
编码以下:

var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
g.addColorStop(0,'red');
g.addColorStop(0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);