canvas 基础学习笔记

最新推荐文章于 2023-09-15 00:08:50 发布

侧耳倾听...

最新推荐文章于 2023-09-15 00:08:50 发布

阅读量180

点赞数 1

分类专栏： css样式

本文链接：https://blog.csdn.net/xm_w_xm/article/details/118490184

版权

css样式专栏收录该内容

19 篇文章 0 订阅

订阅专栏

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

方法描述

createLinearGradient()

创建线性渐变（用在画布内容上）

JavaScript 语法：

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

 var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createLinearGradient(0, 0, 170, 0); 
      grd.addColorStop(0, "black");
      grd.addColorStop(0.5, "red");
      grd.addColorStop(1, "white");
      ctx.fillStyle = grd;
      ctx.fillRect(20, 20, 150, 75);

参数值

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

createPattern()

在指定的方向上重复指定的元素

JavaScript 语法：

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

 // direction:'repeat''repeat-x''repeat-y''no-repeat'
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.clearRect(0, 0, c.width, c.height);
      var img = document.getElementById("lamp");
      var pat = ctx.createPattern(img, direction);
      ctx.rect(0, 0, 150, 100);
      ctx.fillStyle = pat;
      ctx.fill();

参数值

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

createRadialGradient()

创建放射状/环形的渐变（用在画布内容上）

JavaScript 语法：

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

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

参数值

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

addColorStop()

规定渐变对象中的颜色和停止位置

JavaScript 语法：

gradient.addColorStop(stop,color);

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

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");

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

参数值

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

线条样式

属性描述

lineCap

设置或返回线条的结束端点样式

定义和用法

lineCap 属性设置或返回线条末端线帽的样式。

注释："round" 和 "square" 会使线条略微变长。

默认值：	butt
JavaScript 语法：	context.lineCap="butt\|round\|square";

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

ctx.beginPath();
ctx.lineWidth=10;
ctx.lineCap="butt";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,40);
ctx.lineTo(200,40);
ctx.stroke();

ctx.beginPath();
ctx.lineCap="square";
ctx.moveTo(20,60);
ctx.lineTo(200,60);
ctx.stroke();

属性值

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

lineJoin

设置或返回两条线相交时，所创建的拐角类型

定义和用法

lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。

注释：值 "miter" 受 miterLimit 属性的影响。

默认值：	miter
JavaScript 语法：	context.lineJoin="bevel\|round\|miter";

属性值

值

描述

bevel

创建斜角。

round

创建圆角。

miter

默认。创建尖角。

lineWidth

设置或返回当前的线条宽度

定义和用法

lineWidth 属性设置或返回当前线条的宽度，以像素计。

默认值：	1
JavaScript 语法：	context.lineWidth=number;

属性值

值	描述
number	当前线条的宽度，以像素计。

miterLimit

设置或返回最大斜接长度

定义和用法

miterLimit 属性设置或返回最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。

为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（图解 3）：

默认值：	10
JavaScript 语法：	context.miterLimit=number;

属性值

值

描述

number

正数。规定最大斜接长度。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

矩形

方法描述

rect()

创建矩形

定义和用法

rect() 方法创建矩形。

提示：请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

JavaScript 语法：

context.rect(x,y,width,height);

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();

参数值

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

fillRect()

绘制“被填充”的矩形

定义和用法

fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

JavaScript 语法：

context.fillRect(x,y,width,height);

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

参数值

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

strokeRect()

绘制矩形（无填充）

定义和用法

strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。

提示：请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

JavaScript 语法：

context.strokeRect(x,y,width,height);

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

参数值

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

clearRect()

在给定的矩形内清除指定的像素

定义和用法

clearRect() 方法清空给定矩形内的指定像素。

JavaScript 语法：

context.clearRect(x,y,width,height);

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

参数值

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

路径

方法描述

fill()

填充当前绘图（路径）

定义和用法

fill() 方法填充当前的图像（路径）。默认颜色是黑色。

提示：请使用 fillStyle 属性来填充另一种颜色/渐变。

注释：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

JavaScript 语法：

context.fill();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();

stroke()

绘制已定义的路径

定义和用法

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

提示：请使用 strokeStyle 属性来绘制另一种颜色/渐变。

JavaScript 语法：

context.stroke();

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.strokeStyle="green";
ctx.stroke();

beginPath()

起始一条路径，或重置当前路径

定义和用法

beginPath() 方法开始一条路径，或重置当前的路径。

提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：

context.fillRect(x,y,width,height);

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

ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制

ctx.beginPath();
ctx.strokeStyle="blue"; // 蓝色路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 进行绘制

moveTo()

把路径移动到画布中的指定点，不创建线条

定义和用法

fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：

context.moveTo(x,y);

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

closePath()

创建从当前点回到起始点的路径

定义和用法

closePath() 方法创建从当前点到开始点的路径。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。

JavaScript 语法：

context.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();

lineTo()

添加一个新点，然后在画布中创建从该点到最后指定点的线条

定义和用法

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：

context.lineTo(x,y);

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

参数值

参数	描述
x	路径的目标位置的 x 坐标
y	路径的目标位置的 y 坐标

clip()

从原始画布剪切任意形状和尺寸的区域

定义和用法

clip() 方法从原始画布中剪切任意形状和尺寸。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

JavaScript 语法：

context.clip();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Draw a rectangle
ctx.rect(50,20,200,120);
ctx.stroke();
// Draw red rectangle
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script> 

<br />

<p>使用 clip()：</p>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

quadraticCurveTo()

创建二次贝塞尔曲线

定义和用法

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

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

开始点：moveTo(20,20)
控制点：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)

提示：请查看 bezierCurveTo() 方法。它有两个控制点，而不是一个。

JavaScript 语法：

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

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

参数值

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

bezierCurveTo()

创建三次方贝塞尔曲线

定义和用法

bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

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

开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)

提示：请查看 quadraticCurveTo() 方法。它有一个控制点，而不是两个。

JavaScript 语法：

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

参数值

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

arc()

创建弧/曲线（用于创建圆形或部分圆）

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 语法：

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

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

参数值

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

arcTo()

创建两切线之间的弧/曲线

定义和用法

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

提示：请使用 stroke() 方法在画布上绘制确切的弧。

JavaScript 语法：

context.fillRect(x1,y1,x2,y2,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();                // 进行绘制

参数值

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

isPointInPath()

如果指定的点位于当前路径中，则返回 true，否则返回 false

定义和用法

isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。

JavaScript 语法：

context.isPointInPath(x,y);

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

参数值

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

转换

方法描述

scale()

缩放当前绘图至更大或更小

定义和用法

scale() 方法缩放当前绘图，更大或更小。

注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

JavaScript 语法：

context.scale(scalewidth,scaleheight);

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

参数值

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

rotate()

旋转当前绘图

定义和用法

rotate() 方法旋转当前的绘图。

JavaScript 语法：

context.rotate(angle);

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);

参数值

参数

描述

angle

旋转角度，以弧度计。

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

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

translate()

重新映射画布上的 (0,0) 位置

定义和用法

translate() 方法重新映射画布上的 (0,0) 位置。

注释：当您在 translate() 之后调用诸如 fillRect() 之类的方法时，值会添加到 x 和 y 坐标值上。

JavaScript 语法：

context.translate(x,y);
在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

参数值

参数	描述
x	添加到水平坐标（x）上的值
y	添加到垂直坐标（y）上的值

transform()

替换绘图的当前转换矩阵

定义和用法

画布上的每个对象都拥有一个当前的变换矩阵。

transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵：

a  c  e
b  d  f
0  0  1

换句话说，transform() 允许您缩放、旋转、移动并倾斜当前的环境。

注释：该变换只会影响 transform() 方法调用之后的绘图。

注释：transform() 方法的行为相对于由 rotate(), scale(), translate(), or transform() 完成的其他变换。例如：如果您已经将绘图设置为放到两倍，则 transform() 方法会把绘图放大两倍，您的绘图最终将放大四倍。

提示：请查看 setTransform() 方法，它不会相对于其他变换来发生行为。

JavaScript 语法：

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

绘制一个矩形；通过 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);

参数值

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

setTransform()

将当前转换重置为单位矩阵。然后运行 transform()

定义和用法

画布上的每个对象都拥有一个当前的变换矩阵。

setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

换句话说，setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。

注释：该变换只会影响 setTransform() 方法调用之后的绘图。

JavaScript 语法：

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

绘制一个矩形，通过 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);

参数值

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

文本

属性描述

font

设置或返回文本内容的当前字体属性

定义和用法

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 CSS 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	规定字体系列。
caption	使用标题控件的字体（比如按钮、下拉列表等）。
icon	使用用于标记图标的字体。
menu	使用用于菜单中的字体（下拉列表和菜单列表）。
message-box	使用用于对话框中的字体。
small-caption	使用用于标记小型控件的字体。
status-bar	使用用于窗口状态栏中的字体。

textAlign

设置或返回文本内容的当前对齐方式

定义和用法

textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。

通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。

提示：使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本。

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

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

// Create a red line in position 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";    

// Show the different textAlign values
ctx.textAlign="start";      
ctx.fillText("textAlign=start",150,60);        
ctx.textAlign="end";      
ctx.fillText("textAlign=end",150,80);                  
ctx.textAlign="left";      
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";     
ctx.fillText("textAlign=center",150,120);              
ctx.textAlign="right";      
ctx.fillText("textAlign=right",150,140);

属性值

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

textBaseline

设置或返回在绘制文本时使用的当前文本基线

定义和用法

textBaseline 属性设置或返回在绘制文本时的当前文本基线。

下面的图示演示了 textBaseline 属性支持的各种基线：

注释：fillText() 或 strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值。

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

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);

属性值

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

方法描述

fillText()

在画布上绘制“被填充的”文本

定义和用法

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

JavaScript 语法：

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

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);

参数值

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

strokeText()

在画布上绘制文本（无填充）

定义和用法

strokeText() 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。

JavaScript 语法：

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

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

ctx.font="20px Georgia";
ctx.strokeText("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.strokeStyle=gradient;
ctx.strokeText("w3school.com.cn",10,90);

参数值

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

measureText()

返回包含指定文本宽度的对象

定义和用法

measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。

JavaScript 语法：

context.measureText(text).width;

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

参数值

参数	描述
text	要测量的文本。

图像绘制

方法描述

drawImage()

向画布上绘制图像、画布或视频

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

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	可选。要使用的图像的高度。（伸展或缩小图像）

像素操作

属性

描述

width

返回 ImageData 对象的宽度

定义和用法

width 属性返回 ImageData 对象的宽度，以像素计。

提示：请参阅 createImageData()、getImageData() 以及 putImageData() 方法，以获得更多关于 ImageData 对象的知识。

默认值：	#000000
JavaScript 语法：	imgData.width;

height

返回 ImageData 对象的高度

定义和用法

height 属性返回 ImageData 对象的高度，以像素计。

提示：请参阅 createImageData()、getImageData() 以及 putImageData() 方法，以获得更多关于 ImageData 对象的知识。

默认值：	#000000
JavaScript 语法：	imgData.height;

data

返回一个对象，其包含指定的 ImageData 对象的图像数据

定义和用法

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

data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

例子：

将 ImageData 对象中的第一个像素变为红色的语法：

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

将 ImageData 对象中的第二个像素变为绿色的语法：

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

提示：请参阅 createImageData()、getImageData() 以及 putImageData() 方法，以获得更多关于 ImageData 对象的知识。

JavaScript 语法：

imageData.data;

方法

描述

createImageData()

创建新的、空白的 ImageData 对象

定义和用法

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

因此，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

例子：

该语法把 ImageData 对象中的第一个像素变为红色：

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

该语法把 ImageData 对象中的第二个像素变为红色：

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

JavaScript 语法

有两个版本的 createImageData() 方法：

1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：

var imgData=context.createImageData(width,height);

2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

var imgData=context.createImageData(imageData);

参数值

参数	描述
width	ImageData 对象的宽度，以像素计。
height	ImageData 对象的高度，以像素计。
imageData	另一个 ImageData 对象。

getImageData()

返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据

定义和用法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

例子：

以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

JavaScript 语法

var imgData=context.getImageData(x,y,width,height);

参数值

参数	描述
x	开始复制的左上角位置的 x 坐标。
y	开始复制的左上角位置的 y 坐标。
width	将要复制的矩形区域的宽度。
height	将要复制的矩形区域的高度。

putImageData()

把图像数据（从指定的 ImageData 对象）放回画布上

定义和用法

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

提示：请参阅 getImageData() 方法，它可复制画布上指定的矩形的像素数据。

提示：请参阅 createImageData() 方法，它可创建新的空白 ImageData 对象。

JavaScript 语法：

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

参数值

参数	描述
imgData	规定要放回画布的 ImageData 对象。
x	ImageData 对象左上角的 x 坐标，以像素计。
y	ImageData 对象左上角的 y 坐标，以像素计。
dirtyX	可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY	可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth	可选。在画布上绘制图像所使用的宽度。
dirtyHeight	可选。在画布上绘制图像所使用的高度。

合成

属性

描述

globalAlpha

设置或返回绘图的当前 alpha 或透明值

定义和用法

globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。

globalAlpha 属性值必须是介于 0.0（完全透明）与 1.0（不透明）之间的数字。

默认值：	1.0
JavaScript 语法：	context.globalAlpha=number;

属性值

值	描述
number	透明值。必须介于 0.0（完全透明）与 1.0（不透明）之间。

globalCompositeOperation

设置或返回新图像如何绘制到已有的图像上

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

默认值：	source-over
JavaScript 语法：	context.globalCompositeOperation="source-in";

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

其他

方法	描述
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()

侧耳倾听...

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
canvas 基础学习笔记

颜色、样式和阴影属性描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 shadowColor 设置或返回用于阴影的颜色 shadowBlur 设置或返回用于阴影的模糊级别 shadowOffsetX 设置或返回阴影距形状的水平距离 shadowOffsetY 设置或返回阴影距形状的垂直距离方法描述 createLinearGradient(
复制链接

扫一扫