canvas的主要方法（2）

 

定义和用法

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

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

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

JavaScript 语法：

context.fill();填充块区颜色

 

定义和用法

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

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

JavaScript 语法：

context.stroke();通过坐标绘制已经定义的路径

 

 

定义和用法

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

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

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

JavaScript 语法：

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

ctx.beginPath();假设如果没有这个beginpath则会所有的路径都是红色。不会出现蓝色，beginpath相当于保存当前路径重新开启另外一条路径
ctx.strokeStyle="blue"; // 蓝色路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke();

定义和用法

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();
画出三角形

 

 

定义和用法

moveTo（）

JavaScript 语法：

context.moveTo(x,y);

参数值

参数 描述

x	路径的目标位置的 x 坐标
y	路径的目标位置的 y 坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);//开始点
ctx.lineTo(300,150);//移动点
ctx.stroke();//填充实线
注意：可根据此方法用鼠标拖动画线。

 

 

 

定义和用法

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);//画圆圈,可以设置fillstyle的样式（颜色），在调用fill（）方法可以给圆上颜色。

参数值

参数 描述

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

 

 

 

定义和用法

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

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

JavaScript 语法：

context.scale(scalewidth,scaleheight);缩放当前图片，按照一定的比例。

参数值

参数 描述

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

 

 

 

 

定义和用法

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