Canvas 实用API详解
说明
本篇内容可以看做是一篇关于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); // 400console.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 |
规定字体样式。可能的值:
|
font-variant |
规定字体变体。可能的值:
|
font-weight |
规定字体的粗细。可能的值:
|
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() |
Canvas 实用API详解相关推荐
- 【云星数据---Apache Flink实战系列(精品版)】:Apache Flink批处理API详解与编程实战025--DateSet实用API详解025
一.Flink DateSet定制API详解(JAVA版) -002 flatMap 以element为粒度,对element进行1:n的转化. 执行程序: package code.book.bat ...
- Android复习14【高级编程:推荐网址、抠图片上的某一角下来、Bitmap引起的OOM问题、三个绘图工具类详解、画线条、Canvas API详解(平移、旋转、缩放、倾斜)、矩阵详解】
目 录 推荐网址 抠图片上的某一角下来 8.2.2 Bitmap引起的OOM问题 8.3.1 三个绘图工具类详解 画线条 8.3.16 Canvas API详解(Part 1) 1.transla ...
- Android基础入门教程——8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash
Android基础入门教程--8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash 标签(空格分隔): Android基础入门教程 本节引言: 在Canva ...
- Java8 Date API 详解 - LocalDate,LocalDateTime,Instant
转载来源:https://www.journaldev.com/2800/java-8-date-localdate-localdatetime-instant Java8 Date API 详解 - ...
- ext核心API详解
http://hi.baidu.com/j2me/profile 1 EXT核心API详解(一)-Ext 1 EXT核心API详解(二)-Array/Date/Function/Number/Stri ...
- H5的新特性及API详解(很惊人)
H5的新特性及API详解(很惊人) 2017-01-20 17:00 4057人阅读 评论(0) 收藏 举报 分类: h5(11) js函数(64) js技巧(15) 版权声明:本文为博主原创 ...
- 自定义View之Canvas(画布)的详解
接下来学习一下自定义View之Canvas(画布)的详解 先来看看Canvas常用方法: 功能分类 Canvas常用方法 备注 绘制颜色 drawARGB 通过设置ARGB值绘制颜色 drawRGB ...
- java canvas详解_HTML5的canvas绘图技术详解
原标题:HTML5的canvas绘图技术详解 本篇教程探讨了HTML5的canvas绘图技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < canvas ...
- 百度PaddleOCR及云平台OCR API详解及示例
百度PaddleOCR及云平台OCR API详解及示例 目录 百度PaddleOCR及云平台OCR API详解及示例 使用百度开源的PaddleOCR 多个开源代码库比较
最新文章
- H264码流中SPS PPS
- 如何在Linux下安装MySQL8.0
- SAP MM 明明已经扩展供应商到采购组织下,采购订单里还是报错?
- 关于mac注册机core keygen在10.12及以上版本不能使用的解决方法
- C# WPF MVVM开发框架Caliburn.Micro IResult和协同程序⑥
- 网络包排错指南-类linux 平台
- IntelliJ IDEA 2017 MySQL5 绿色版 Spring 4 Mybatis 3 配置步骤详解(二)
- 分治法求最大和最小值
- Confluence 6 让一个空间可以公众访问
- 怎么检测mysql查询是否慢_MySQL慢查询查找和调优测试
- 【渝粤教育】国家开放大学2018年春季 0471-22T畜牧学 参考试题
- ckeditor简单使用心得
- AdBlock广告拦截插件的实现原理
- Android.light.apk,Android_Lightblue.apk
- ios html跳转appstore,H5跳转app store问题
- python图形绘制星空图_天文星空图谱开源软件Stellarium
- 百度云同步盘服务器错误,百度云同步盘
- BitTorrent下载原理和演示
- 能力培养——学会学习
- TestNG-学习笔记