Canvas 实用API详解

最新推荐文章于 2024-04-20 16:29:18 发布
最新推荐文章于 2024-04-20 16:29:18 发布
阅读量1w 收藏 64
点赞数 15
分类专栏： 前端集合 文章标签： Web前端 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zeping891103/article/details/72730968
版权

说明

本篇内容可以看做是一篇关于canvas的API文档，由于全文的篇幅较长，通常用于作为API文档查看，可通过目录查找。本篇也可做为想详细了解canvas所有操作的学习文章。Canvas 对象表示一个 HTML 画布元素<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化绘图操作。我们可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过 CanvasRenderingContext2D 对象获得。例如：

 

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	console.log(ctx); // CanvasRenderingContext2D对象
	console.log(c.width); // 400
	console.log(c.height); // 400
</script>

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。

 

Canvas对象的API详解

1.样式设置 fillStyle | strokeStyle 

指设置将要绘制图案的填充或边的样式

 

属性描述
fillStyle设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle设置或返回用于笔触的颜色、渐变或模式

fillStyle、strokeStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

 

默认值：#000000
JavaScript 语法：context.fillStyle=color|gradient|pattern;

 

默认值：#000000
JavaScript 语法：context.strokeStyle=color|gradient|pattern;

属性值：

 

值描述
color指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient用于填充绘图的渐变对象（线性或放射性）
pattern用于创建 pattern 笔触的 pattern 对象

 

CSS颜色的表示方式有：

——直接用颜色名称:"red" "green" "blue"；

——十六进制颜色值: "#EEEEFF"；

——rgb(1-255,1-255,1-255)；

——rgba(1-255,1-255,1-255,透明度)；

常与设置样式配合使用的方法是：填充绘制和边绘制。

 

 

方法描述
fill()填充当前绘图（路径）
stroke()绘制已定义的路径

如绘制一个蓝色的矩形，如：

ctx.fillStyle = "#0000ff";
ctx.rect(20, 20, 150, 100);
ctx.fill();

半透明的蓝色矩形，如：

 

ctx.fillStyle = "rgba(0, 0, 255, 0.5)";

 

2.形状设置

形状设置包括了矩形、圆形和贝塞尔曲线。

 

方法描述
rect()创建矩形
fillRect()绘制“被填充”的矩形
strokeRect()绘制矩形（无填充）
clearRect()在给定的矩形内清除指定的像素
quadraticCurveTo()创建二次贝塞尔曲线
bezierCurveTo()创建三次方贝塞尔曲线
arc()创建弧/曲线（用于创建圆形或部分圆）
arcTo()创建两切线之间的弧/曲线

矩形 rect（） | fillRect（） | strokeRect（） | clearRect（）

相关JavaScript语法：

 

context.rect(x,y,width,height);
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
context.clearRect(x,y,width,height);

属性值：

 

 

参数描述
x矩形左上角的 x 坐标
y矩形左上角的 y 坐标
width矩形的宽度，以像素计
height矩形的高度，以像素计

通过 rect() 方法来创建三个矩形，

源码：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

// 绿色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// 蓝色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

（注）方法beginPath（）的作用在于从新的路径（或新起点）开始绘制图案，简单来说新图案的绘制过程不受画布已有图案影响。

圆形 arc（）

JavaScript语法：

 

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

属性值：

 

 

参数描述
x圆的中心的 x 坐标。
y圆的中心的 y 坐标。
r圆的半径。
sAngle起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle结束角，以弧度计。
counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。

（提示）：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
（提示）：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

绘制一个圆形：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

弧 arcTo（）

在画布上创建介于两个切线之间的弧的JavaScript语法：

context.arcTo(x1,y1,x2,y2,r);

属性值：

 

参数描述
x1弧的起点的 x 坐标
y1弧的起点的 y 坐标
x2弧的终点的 x 坐标
y2弧的终点的 y 坐标
r弧的半径

绘制一道两切线间的弧：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 进行绘制

二次贝塞尔曲线 quadraticCurveTo（）

JavaScript语法：

 

 

context.quadraticCurveTo(cpx,cpy,x,y);

属性值：

 

 

参数描述
cpx贝塞尔控制点的 x 坐标
cpy贝塞尔控制点的 y 坐标
x结束点的 x 坐标
y结束点的 y 坐标

（提示）：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

绘制一条二次贝塞尔曲线：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

三次贝塞尔曲线 bezierCurveTo（）

JavaScript语法：

 

 

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

属性值：

 

 

cp1x第一个贝塞尔控制点的 x 坐标
cp1y第一个贝塞尔控制点的 y 坐标
cp2x第二个贝塞尔控制点的 x 坐标
cp2y第二个贝塞尔控制点的 y 坐标
x结束点的 x 坐标
y结束点的 y 坐标

（提示）：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

绘制一条三次贝塞尔曲线：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

 

 

 

3.线条和路径设置

 

方法描述
lineCap设置或返回线条的结束端点样式
lineJoin设置或返回两条线相交时，所创建的拐角类型
lineWidth设置或返回当前的线条宽度
miterLimit设置或返回最大斜接长度
beginPath()起始一条路径，或重置当前路径
closePath()创建从当前点回到起始点的路径
moveTo()把路径移动到画布中的指定点，不创建线条
lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条

结束线帽lineCap

 

指设置绘制圆形的结束线帽：

 

默认值：butt
JavaScript 语法：context.lineCap="butt|round|square"; // 平直边缘 | 圆形线帽 | 方形线帽

绘制一条结束点为圆形线帽的直线：

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

拐角类型lineJoin

两线相交点拐角的类型。当类型值为miter时，常与miterLimit一起使用。因为当两线夹角越小时，miter尖角会越长，miterLimit用于控制尖角的长度。

 

 

默认值：miter
JavaScript 语法：context.lineJoin="bevel|round|miter"; // 斜角 | 圆角 | 尖角

以最大斜接长度 5 绘制线条：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

（提示）：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（图解 3）：

 

 

 

beginPath( ) | closePath( )

beginPath（）可以理解为从新的路径（或新起点）开始绘制图案，简单来说新图案的绘制过程不受画布已有图案影响。如不设置beginPath（），多次绘制时，已有图案会受到新图案的绘制样式影响。closePath( )是指闭合路径，即从当前笔触点至最开始的笔触起始点创建连接直线，形成闭合。

绘制闭合三角形：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();

moveTo( ) | lineTo( )

 moveTo（）是指将笔触移动到指定坐标点，lineTo是指从当前笔触坐标点往指定坐标点绘制一条直线。

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

4.文本设置

包括文本样式设置和创建。

 

属性描述
font设置或返回文本内容的当前字体属性
textAlign设置或返回文本内容的当前对齐方式
textBaseline设置或返回在绘制文本时使用的当前文本基线
方法描述
fillText()在画布上绘制“被填充的”文本
strokeText()在画布上绘制文本（无填充）
measureText()返回包含指定文本宽度的对象

文本样式font

 

默认值：10px sans-serif
JavaScript 语法：context.font="italic small-caps bold 12px arial";

属性值：

 

值描述
font-style

规定字体样式。可能的值：

  • normal
  • italic
  • oblique
font-variant

规定字体变体。可能的值：

  • normal
  • small-caps
font-weight

规定字体的粗细。可能的值：

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height规定字号和行高，以像素计。
font-family规定字体系列。

在画布上写一段 40 像素的文本，使用的字体是 "Arial"：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);

 

文本对齐textAlign

默认值：start
JavaScript 语法：context.textAlign="center|end|left|right|start";

属性值：

 

 

值描述
start默认。文本在指定的位置开始。
end文本在指定的位置结束。
center文本的中心被放置在指定的位置。
left文本左对齐。
right文本右对齐。

在位置 150 创建一条红线。位置 150 是下面例子中定义的所有文本的锚点。请研究每种 textAlign 属性值的效果：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 在位置 150 创建蓝线
ctx.strokeStyle = "blue";
ctx.moveTo(150, 0);
ctx.lineTo(150, 170);
ctx.stroke();

ctx.font = "15px Arial";

// 显示不同的 textAlign 值
ctx.textAlign = "start";
ctx.fillText("textAlign=start", 150, 15); //起始位置为注册坐标
ctx.textAlign = "end";
ctx.fillText("textAlign=end", 150, 30); //结束位置为注册坐标
ctx.textAlign = "left";
ctx.fillText("textAlign=left", 150, 45); //居中对齐
ctx.textAlign = "center";
ctx.fillText("textAlign=center", 150, 60); //左对齐
ctx.textAlign = "right";
ctx.fillText("textAlign=right", 150, 75); //右对齐

 

文本基线textBaseLine

默认值：alphabetic
JavaScript 语法：context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

属性值：

 

 

值描述
alphabetic默认。文本基线是普通的字母基线。
top文本基线是 em 方框的顶端。。
hanging文本基线是悬挂基线。
middle文本基线是 em 方框的正中。
ideographic文本基线是表意基线。
bottom文本基线是 em 方框的底端。

实例：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//在位置 y=100 绘制蓝色线条
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//在 y=200 以不同的 textBaseline 值放置每个单词
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

 

绘制文本fillText（） | strokeText（）

 

JavaScript 语法：

 

 

 

context.fillText(text,x,y,maxWidth);
context.strokeText(text,x,y,maxWidth);

属性值：

 

 

参数描述
text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置（相对于画布）。
y开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth可选。允许的最大文本宽度，以像素计。

使用 fillText()，在画布上写文本 "Hello world!" 和 "w3school.com.cn"：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);

 

测量文本宽度measureText()

JavaScript语法：

 

 

context.measureText(text).width;

 

 

 

 

5.变换设置

方法描述
scale()缩放当前绘图至更大或更小
rotate()旋转当前绘图
translate()重新映射画布上的 (0,0) 位置
transform()替换绘图的当前转换矩阵
setTransform()将当前转换重置为单位矩阵。然后运行 transform()

缩放scale（） | 旋转rotate（） | 位移translate（）

 

JavaScript语法：

 

context.scale(scalewidth,scaleheight); //缩放
参数描述
scalewidth缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
context.rotate(angle); //旋转
参数描述
angle

旋转角度，以弧度计。

如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

context.translate(x,y); //位移
参数描述
x添加到水平坐标（x）上的值
y添加到垂直坐标（y）上的值

矩阵设置transform() | setTransform()

 

两者JavaScript语法相同，以transform为例：

 

context.transform(a,b,c,d,e,f);

属性值：

 

 

参数描述
a水平缩放绘图
b水平倾斜绘图
c垂直倾斜绘图
d垂直缩放绘图
e水平移动绘图
f垂直移动绘图

区别：transform()变换是指在上一次变换的状态基础上再次变换；setTransform()变换是指先重置到最初始的状态再开始变换。

绘制一个矩形；通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：

 

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

 

 

 

6.阴影设置

 

 

属性描述
shadowColor设置或返回用于阴影的颜色
shadowBlur设置或返回用于阴影的模糊级别
shadowOffsetX设置或返回阴影距形状的水平距离
shadowOffsetY设置或返回阴影距形状的垂直距离

阴影颜色shadowColor | 阴影模糊级别shadowBlur

 

 

默认值：#000000
JavaScript 语法：context.shadowColor=color;
默认值：0
JavaScript 语法：context.shadowBlur=number;

绘制一个带有黑色阴影的蓝色矩形，模糊级数是 20：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

 

阴影水平坐标shadowOffsetX | 阴影垂直坐标shadowOffsetY

默认值：0
JavaScript 语法：context.shadowOffsetX=number;
默认值：0
JavaScript 语法：context.shadowOffsetY=number;

绘制一个矩形，带有向右偏移 20 像素的阴影（从矩形的 left 位置），带有向下偏移 20 像素的阴影（从矩形的 top 位置）：

 

 

 

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 80);

 

7.色彩渐变设置

方法描述
createLinearGradient()创建线性渐变（用在画布内容上）
createRadialGradient()创建放射状/环形的渐变（用在画布内容上）
addColorStop()规定渐变对象中的颜色和停止位置

渐变色彩和停止位置addColorStop()

JavaScrip语法

 

 

gradient.addColorStop(stop,color);

属性值：

 

 

 

参数描述
stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color在结束位置显示的 CSS 颜色值

线性渐变createLinearGradient()

 

语法：

 

context.createLinearGradient(x0,y0,x1,y1);

属性值：

 

 

 

参数描述
x0渐变开始点的 x 坐标
y0渐变开始点的 y 坐标
x1渐变结束点的 x 坐标
y1渐变结束点的 y 坐标

(提示)：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

定义从黑到白的渐变（从左向右），作为矩形的填充样式：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

 

放射性渐变createRadialGradient()

语法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

 

属性值：

 

 

参数描述
x0渐变的开始圆的 x 坐标
y0渐变的开始圆的 y 坐标
r0开始圆的半径
x1渐变的结束圆的 x 坐标
y1渐变的结束圆的 y 坐标
r1结束圆的半径

绘制一个矩形，并用放射状/圆形渐变进行填充：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,75,50,40);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

 

 

 

8.其它设置

 

图像重复createPattern()

JavaScript语法：

 

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

属性值：

 

 

参数描述
image规定要使用的图片、画布或视频元素。
repeat默认。该模式在水平和垂直方向重复。
repeat-x该模式只在水平方向重复。
repeat-y该模式只在垂直方向重复。
no-repeat该模式只显示一次（不重复）。

用到的图像：

在水平和垂直方向重复图像：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

 

点是否位于当前路径中isPointInPath()

 

JavaScript语法：

 

context.isPointInPath(x,y);

属性性：

 

 

参数描述
x测试的 x 坐标
y测试的 y 坐标

绘制一个矩形，如果点 20,50 位于当前路径中：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
{
   ctx.stroke();
};

绘制图像视频drawImage()

JavaScript 语法 1
在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2
在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

JavaScript 语法 3
剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

 

属性值：

 

参数描述
img规定要使用的图像、画布或视频。
sx可选。开始剪切的 x 坐标位置。
sy可选。开始剪切的 y 坐标位置。
swidth可选。被剪切图像的宽度。
sheight可选。被剪切图像的高度。
x在画布上放置图像的 x 坐标位置。
y在画布上放置图像的 y 坐标位置。
width可选。要使用的图像的宽度。（伸展或缩小图像）
height可选。要使用的图像的高度。（伸展或缩小图像）

剪切图片，并在画布上对被剪切的部分进行定位：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

 

像素操作createImageData | getImageData() | putImageData()

 

 

方法描述
createImageData()创建新的、空白的 ImageData 对象
getImageData()返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()把图像数据（从指定的 ImageData 对象）放回画布上

合成操作globalAlpha() | globalCompositeOperation()

 

属性描述
globalAlpha设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation设置或返回新图像如何绘制到已有的图像上

（注）globalCompositeOperation可用于遮罩截图功能。

更多

 

方法描述
save()保存当前环境的状态
restore()返回之前保存过的路径状态和属性
createEvent() 
getContext() 
toDataURL() 
黄泽平
关注
  • 15
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于Canvas 常用API汇总
qq_39923034的博客
04-24 7677
Canvas是什么 Canvas英文画布，是HTML5出的一个可以在上面绘制一系列图像的元素。 Canvas的使用场景 可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 基本使用方法 在HTML文件中 <canvas id="canvasBox" width="" height=""></canvas> <!-- 注解: canvas必须是闭合标签</canvas>不可省,如果省略文档的其他内容将不会显示 只有两个属性width和height如
（转）学习 HTML5 Canvas 这一篇文章就够了
02-27 819
学习 HTML5 Canvas 这一篇文章就够了 一、canvas 简介 ​<canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firef...
Canvas Api(全)
Big_YiFeng的博客
05-30 3722
Canvas API ctx.moveTo(100,100) 参数 x 横坐标 y 竖坐标 作用 将画笔移动到坐标中的某个点 ctx.lineTo(100,100) 参数 x 横坐标 y 竖坐标 作用 将画笔从它所在的点到另一个点用线连接 ctx.stroke() 参数 作用 画 ctx.strokeStyle (‘red’) 参数 色值 作用 画笔颜色 ctx.beginPath() 参数 作用 开始使用一只新的画笔，防止之前的画笔的各种属性污染到新的图 ctx.closePath() 参数
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
最新发布
Lan_0316的博客
04-20 2283
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
①万字《详解canvas api画图》小白前端入门教程（建议收藏）(1)
2301_78416672的博客
04-08 900
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
canvas的api总结整理
林达浪学前端
01-15 1051
canvas知识整理
H5--Canvas使用以及API
coding...
05-07 1406
Canvas前端绘图工具，Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色。canvas 搭配video。
详解Canvas实用库Fabric.js使用手册
01-19
由于Fabric.js为国外框架，官方API杂乱繁多，相关文档大多为英文文档，而且数量不多，所以本文旨在帮助新手在项目中快速上手Fabric.js，享受绘制Canvas的过程。 为什么要使用Fabric.js？ Canvas提供一个好的画布能力...
微信小程序 二维码canvas绘制实例详解
08-31
在微信小程序中，使用canvas进行二维码的绘制是一个实用的技术，它可以让我们自定义二维码的样式，增加视觉效果。本文将详细讲解如何在微信小程序中利用canvas生成二维码，并添加干扰元素以提高安全性和美观度。 ...
详解基于canvas的视频遮罩插件
09-27
这种技术在多种场景下非常实用，例如遮挡卫视图标、视频右下角的广告，甚至作为马赛克功能。 在前端实现视频遮罩有两种主要技术方案：基于Div和基于Canvas。基于Div的方法通常通过CSS定位和叠加元素来实现，而基于...
HTML5拖拽API经典实例详解
09-27
在这个经典实例详解中，我们将深入理解拖拽API的基本概念，了解相关函数，并探讨如何在源对象和目标对象之间传递数据。 一、拖拽API概述 拖拽API是HTML5引入的新特性，尽管它的重要性可能不如其他一些特性如Canvas...
HTML 5 canvas
10-21
该资料详细介绍了如何方便的利用HTML5 canvas进行绘图的技巧，阅读后比较容易上手。
MDN Canvas API 中文文档 20171202
12-02
MDN Canvas API 中文文档 20171202 MDN Canvas API 中文文档 20171202
HTML 5 Canvas API
03-29
NULL 博文链接：https://chenhailong.iteye.com/blog/1285171
HTML5_Canvas开发详解（第2版）
10-31
《HTML5_Canvas开发详解（第2版）》这本书深入探讨了Canvas API的各个方面，旨在帮助读者掌握这个技术的核心概念和实用技巧。 在HTML5中，Canvas元素是一个基于矢量图形的画布，通过JavaScript来控制和操作。本书的...
关于canvas使用api汇总
qq_27161847的博客
09-13 221
关于canvas使用api汇总
HTML5之canvas基本API介绍及应用 1
Fenice
02-26 865
一、canvas的API： 　　1、颜色、样式和阴影： 　　 　　2、线条样式属性和方法： 　　 　　3、路径方法： 　　　 　　4、转换方法： 　　　　 　　5、文本属性和方法： 　　　　 　　6、像素操作方法和属性： 　　　　 　　7、其他： 　　　　drawImage：向画布上绘制图像、画布或视频  chrome不支持 　　　　globalAlpha：设置或返回
HTML5 Canvas API详解
weixin_34302798的博客
02-10 346
HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图...
html5 canvas 文档,创建和发布HTML5 Canvas文档
weixin_39863371的博客
06-03 926
HTML5 Canvas 是什么？Canvas 是 HTML5 中的一个新元素，它提供了多个 API，可以让您动态生成及渲染图形、图表、图像及动画。HTML5 的 Canvas API 提供二维绘制能力，它的出现使得 HTML5 平台更为强大。如今的大多数操作系统和浏览器都支持这些功能。Canvas 本质上是一个位图渲染引擎，其最终结果是生成绘图，且绘图大小不可调整。另外，在 Canvas 上绘制...
canvas 高级api
06-09
Canvas 提供了一些高级 API，可以实现更复杂的图形处理和渲染，主要包括以下几个方面： 1. WebGL：WebGL 是基于 OpenGL ES 2.0 的 3D 绘图标准，可以在 Canvas 上实现高性能的 3D 图形和动画渲染。 2. WebGPU：WebGPU 是最新的 Web 图形 API，可以实现更高效的图形渲染和计算，支持更多的硬件加速功能。 3. WebGL2：WebGL2 是 WebGL 的升级版，支持更多的特性和功能，如多个渲染目标、更高的精度和浮点纹理等。 4. SVG：SVG 是一种基于 XML 的矢量图形格式，可以在 Canvas 上实现更丰富的图形处理和交互效果。 5. Canvas 2D Context 的高级 API：Canvas 2D Context 还提供了一些高级 API，如 `getImageData()`、`putImageData()`、`createImageData()`、`getImageBitmap()` 等，可以实现更高级的图像处理和渲染。 通过使用这些高级 API，可以实现更复杂、更高效、更丰富的图形处理和渲染，提高应用的性能和用户体验。不过，使用这些 API 也需要更高的技术要求和编程能力，需要更深入地理解图形学和计算机图形学的原理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值