HTML5中用法
定义和用法:
HTML5使用canvas标签用于绘制图像,不过canvas本身没有绘制能力,它仅仅是图形的容器,必须使用脚本来完成实际的绘制任务。
getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
标签定义图形,比如图表和其他图像。
标签只是图形容器,您必须使用脚本来绘制图形。
有两个属性:
height设置canvas的高度。
width设置canvas的宽度。
例子:
<template>
<div>
//定义一个画布
<canvas id="myCanvas"></canvas>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
mycas() {
//获取画布
var canvas = document.getElementById("myCanvas");
//设置画布的宽为当前窗口的宽
canvas.width = window.innerWidth;
//设置画布的高为当前窗口的高
canvas.height = window.innerHeight;
//定义一个在画布上绘图的环境,如下是一个二维绘图
var ctx = canvas.getContext("2d");
//定义填充颜色
ctx.fillStyle = "#ff5200";
//定义填充图像,如下为一个矩形,第一参数为x坐标,第二个参数为y坐标,第三个参数为矩形长,第四个参数为矩形高。
ctx.fillRect(0, 0, 80, 100);
}
},
mounted() {
this.mycas();
}
};
</script>
一、颜色填充
fillStyle颜色填充
设置或返回用于填充绘画的颜色,渐变或模式。
(1)填充一个红色矩形:
ctx.fillStyle = "#ff5200";
ctx.fillRect(20, 20, 80, 100);
(2)绘制一个从上到下渐变矩形
//定义一个从上到下的渐变,如果要定义一个从左到右,可以把最后两个参数互换位置
var my_gradient = ctx.createLinearGradient(0, 0, 0, 100);
//规定渐变位置和颜色
my_gradient.addColorStop(0, "#078f00");
my_gradient.addColorStop(1, "#0078ff");
//把定义好的渐变颜色赋值为画布的fillStyle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 80, 100);
createLinearGradient()线性渐变
该方法用来创建线性渐变,渐变可用于填充矩形、圆形、线条、文本等等。
语法:
context.createLinearGradient(x0,y0,x1,y1);
参数说明:
x0:渐变开始点的x坐标。
y0:渐变开始点的y坐标。
x1:渐变结束点的x坐标。
y1:渐变结束点的y坐标。
createRadialGradient()径向渐变
该方法创建放射状/圆形渐变对象。渐变可用于填充矩形,圆形,线条,文本。
语法:
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数说明:
x0:渐变的开始圆的x坐标。
y0:渐变的开始圆的y坐标。
r0:开始圆的半径。
x1:渐变的结束圆的x坐标。
y1:渐变的结束圆的y坐标。
r1:结束圆的半径。
例如:
代码如下:
//绘制径向渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
//绘制渐变颜色
grd.addColorStop(0,'#ff5200');
grd.addColorStop(1,'#2b00e7');
//填充颜色
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
addColorStop()添加渐变颜色
该方法规定gradient对象(渐变)中的颜色和位置。
注:该方法与createLinearGradient()或createRadialGradient()一起使用。
你可以多次调用addColorStop()方法来改变渐变,如果你不对gradient对象使用该方法,那么渐变将不可见,为了获得可见的渐变,你需要至少创建一个色标。
语法:
gradient.addColorStop(stop,color);
参数说明:
stop:介于0.0-1.0之间的值,表示渐变中开始与结束之间的位置。
color:在结束位置显示的css颜色值。
如下方法定义一个多色渐变:
var my_gradient = ctx.createLinearGradient(0, 0, 100,0 );
my_gradient.addColorStop(0, "#078f00");
my_gradient.addColorStop(0.3,'#ffae00');
my_gradient.addColorStop(0.6,'#c700ad');
my_gradient.addColorStop(0.8,'#e4ff00');
my_gradient.addColorStop(1, "#0078ff");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 80, 100);
strokeStyle笔触颜色(描边颜色)
定义和用法:
设置和返回用于笔触的颜色,渐变或模式。
例如:
绘制一个蓝色矩形,strokeStyle和strokeRect()结合使用
ctx.strokeStyle = "#ff5200";
ctx.strokeRect(20, 20, 150, 100);
绘制一个带渐变描边的矩形
var gradient = ctx.createLinearGradient(0, 0, 0,100);
gradient.addColorStop('0', '#ff5200');
gradient.addColorStop('0.5', '#0020c4');
gradient.addColorStop('1', '#ff00f0');
//给strokeStyle赋值
ctx.strokeStyle = gradient;
//定义边的宽度
ctx.lineWidth = 10;
//绘制描边矩形
ctx.strokeRect(20, 20, 150, 100);
绘制渐变描边的文字:
//设置文字大小及字体
ctx.font="30px verdana";
//设置渐变
var gradient = ctx.createLinearGradient(0, 0, 0,100);
gradient.addColorStop('0', '#ff5200');
gradient.addColorStop('0.5', '#0020c4');
gradient.addColorStop('1', '#ff00f0');
//给strokeStyle赋值
ctx.strokeStyle = gradient;
//绘制文字
ctx.strokeText('Hello World!',50,40);
二、阴影设置
shadowColor
用于绘制阴影的颜色。
shadowBlur
用于设置或返回阴影的模糊级数。
例如:
代码如下:
//设置阴影模糊的级别
ctx.shadowBlur=20;
//设置阴影的颜色
ctx.shadowColor="#0c00ff";
//设置填充颜色
ctx.fillStyle="#ff6c00";
//设置填充方式
ctx.fillRect(20,20,100,80);
shadowOffsetX
设置或返回形状与阴影的水平距离。
例如:
shadowOffsetX=0指示阴影位于形状的正下方。
shadowOffsetX=20指示阴影位于形状left位置右侧的20px处。
shadowOffsetX=-20指示阴影位于形状left位置左侧的20px处。
shadowOffsetY
设置或返回形状与阴影的垂直距离。
shadowOffsetY=0指示阴影位于形状的正下方。
shadowOffsetY=20指示阴影位于形状top位置下方的20px处。
shadowOffsetY=-20指示阴影位于形状top位置上方的20px处。
例如:
代码如下:
//设置阴影的大小
ctx.shadowBlur=10;
//设置阴影的颜色
ctx.shadowColor="#000";
//设置阴影向下偏移20px
ctx.shadowOffsetY=20;
//设置阴影向右偏移20px
ctx.shadowOffsetX=20;
//设置填充颜色
ctx.fillStyle="#ff6c00";
//设置填充方式
ctx.fillRect(20,20,100,80);
三、图像填充
createPattern()
在指定的方向上重复指定的元素。元素可以是图片,视频,或者其他canvas元素。被重复的元素可用于绘制或填充矩形,圆形或线条等等。
语法:
context.createPattern(image,‘重复方式’);
参数说明:
image:规定要使用的图片,画布或视频。
重复方式:
(1)repeat默认,该模式在水平和垂直方向重复。
(2)repeat-x,该模式只在水平方向重复。
(3)repeat-y,该模式只在垂直方向重复。
(4)no-repeat,该模式只显示一次(不重复)。
四、矩形
rect()
该方法用来创建矩形。注:请使用stroke()或fill()方法在画布上实际地绘制矩形。
语法:
context.rect(x,y,width,height);
参数说明:
x:矩形左上角的x坐标。
y:矩形左上角的y坐标。
width:矩形的宽度,以像素计
height:矩形的高度,以像素计
fill()
该方法填充当前的图像(路径),默认颜色是黑色。请使用fillStyle属性来填充另一种颜色或渐变。如果路径未关闭,那么fill()方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。
语法:
context.fill();
如下绘制一个矩形:
//绘制路径
ctx.rect(30,30,150,180);
//设置颜色
ctx.fillStyle="#ff0000";
//进行填充
ctx.fill();
fillRect()
绘制“已填色”的矩形,默认的填充颜色是黑色,请使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式。
语法:
context.fillRect(x,y,width,height);
参数说明:
x:矩形左上角的x坐标。
y:矩形左上角的y坐标。
width:矩形的宽度,以像素计。
height:矩形的高度,以像素计。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//填充颜色
ctx.fillStyle="#ff5200";
//填充矩形
ctx.fillRect(20,20,100,100);
strokeRect()
该方法绘制矩形(不填色)。笔触的默认颜色是黑色。使用strokeStyle属性来设置笔触的颜色,渐变或模式。
语法:
context.strokeRect(x,y,width,height);
参数说明:
x:矩形左上角的x坐标。
y:矩形左上角的y坐标。
width:矩形的宽度,以像素计算。
height:矩形的高度,以像素计算。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle="#ff5200";
ctx.strokeRect(20,20,150,100);
clearRect()
该方法清空给定矩形内的指定像素。
语法:
context.clearRect(x,y,width,height);
参数说明:
x:要清除的矩形左上角的x坐标
y:要清除的矩形左上角的y坐标
width:要清除的矩形的宽度,以像素计
height:要清除的矩形的高度,以像素计
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//填充颜色
ctx.fillStyle="#ff5200";
//绘制填充矩形
ctx.fillRect(0,0,300,200);
//清除矩形某一部分
ctx.clearRect(20,20,100,50);
//清除矩形某一部分
ctx.clearRect(20,100,50,50);
五、路径
stroke()
该方法会实际地绘制出通过moveTo()和lineTo()方法定义的路径,默认颜色是黑色。使用strokeStyle属性来绘制颜色或渐变。
语法:
stroke()
beginPath()
开始一条路径,或重置当前的路径,请使用这些方法来创建路径:moveTo(),lineTo(),quadricCurveTo(),bezierCurveTo(),arcTo(),arc(),请使用stroke()方法在画布上绘制确切的路径。
语法:
context.fillRect(x,y,width,height);
moveTo()
把路径移动到画布中的某个指定点,不创建线条,即规定起始点。
语法:
context.moveTo(x,y);
参数说明:
x:路径的目标位置的x坐标
y:路径的目标位置的y坐标
closePath()
该方法创建从当前点到开始点的路径。请使用stroke()方法在画布上绘制确切的路径,请使用fill()方法来填充图像(默认是黑色),请使用fillStyle属性来填充颜色或渐变。
语法:
context.closePath();
lineTo()
该方法添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)。请使用stroke()方法在画布上绘制确切的路径。
语法:
context.lineTo(x,y);
参数说明:
x:路径的目标位置的x坐标
y:路径的目标位置的y坐标
如下图创建一个三角形:
代码如下:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//开始绘制路径
ctx.beginPath();
//设置第一个点
ctx.moveTo(20, 20);
//设置第二个点
ctx.lineTo(80, 100);
//设置第三个点
ctx.lineTo(70, 180);
//连接当前所在的点到第一个点的路径
ctx.closePath();
//设置边的宽度
ctx.lineWidth = "3"
//设置边的颜色
ctx.strokeStyle = "#ff5200";
//填充边
ctx.stroke();
clip()
该方法从原始画布中剪切任意形状和尺寸。注:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域),你也可以再使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复(通过restore()方法)。
语法:
context.clip();
如下图对一个区域进行剪切:
代码如下:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//创建一个矩形画布
ctx.rect(20,20,300,300);
//对画布进行笔触描边绘制
ctx.stroke();
//开始进行剪切
ctx.clip();
// 填充剪切区域颜色
ctx.fillStyle="#ff5200";
//设置剪切区域的大小位置
ctx.fillRect(30,30,140,120);
quadraticCurveTo()
通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
提示:二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点:moveTo(20,20)
控制点:quadraticCurveTo(20,100,200,20)
语法:
context.quadraticCurveTo(cpx,cpy,x,y);
参数说明:
cpx:贝塞尔控制点的x坐标
cpy:贝塞尔控制点的y坐标
x:结束点的x坐标
y:结束点的y坐标
如下图绘制一条贝塞尔曲线:
代码如下:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 开始绘制路径
ctx.beginPath();
// 开始绘制下笔的点
ctx.moveTo(20,20);
// 使用二次贝塞尔曲线的指定控制点
ctx.quadraticCurveTo(20,100,200,20);
// 填充路径
ctx.stroke();
bezierCurveTo()
通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。
提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点:moveTo(20,20)
控制点 1:bezierCurveTo(20,100,200,100,200,20)
语法:
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
参数说明:
cp1x:第一个贝塞尔控制点的 x 坐标
cp1y:第一个贝塞尔控制点的 y 坐标
cp2x:第二个贝塞尔控制点的 x 坐标
cp2y:第二个贝塞尔控制点的 y 坐标
x:结束点的 x 坐标
y:结束点的 y 坐标
下图绘制一个三次贝塞尔曲线:
代码如下:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 开始绘制路径
ctx.beginPath();
// 开始绘制下笔的点
ctx.moveTo(20,20);
// 使用二次贝塞尔曲线的指定控制点
ctx.bezierCurveTo(20,110,190,50,30,140);
// 填充路径
ctx.stroke();
arc()
arc() 方法创建弧/曲线(用于创建圆或部分圆)。提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2Math.PI。提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
中心:arc(100,75,50,0Math.PI,1.5Math.PI)
起始角:arc(100,75,50,0,1.5Math.PI)
结束角:arc(100,75,50,0Math.PI,1.5Math.PI)
语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数说明:
x:圆的中心的 x 坐标。
y:圆的中心的 y 坐标。
r:圆的半径。
sAngle:起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)(正圆起始角度是0)
eAngle:结束角,以弧度计。(正圆的结束角度是2*Math.PI)
counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
如下绘制一个正圆:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//开始绘制路径
ctx.beginPath();
//绘制正圆
ctx.arc(100,100,50,0,2*Math.PI)
//填充路径
ctx.stroke();
arcTo()
在画布上创建介于两个切线之间的弧或曲线。提示:请使用 stroke() 方法在画布上绘制确切的弧。
语法:
context.fillRect(x1,y1,x2,y2,r);
参数说明:
x1:弧的起点的 x 坐标
y1:弧的起点的 y 坐标
x2:弧的终点的 x 坐标
y2:弧的终点的 y 坐标
r:弧的半径
例如:
代码如下:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//开始绘制路径
ctx.beginPath();
// 设置起点
ctx.moveTo(20,20);
// 直线链接第二个点
ctx.lineTo(100,20);
// 设置弧
ctx.arcTo(150,20,150,70,50);
// 设置下一个直线点
ctx.lineTo(150,180);
//连接末点和起始点
ctx.closePath();
//填充路径
ctx.stroke();
isPointInPath()
isPointInPath() 方法返回 true,如果指定的点位于当前路径中;否则返回 false。
语法:
context.isPointInPath(x,y);
参数说明:
x:测试的 x 坐标
y:测试的 y 坐标
例如:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
{
ctx.stroke();
};
六、线条样式
lineCap
设置或返回线条的结束端点样式
语法:
属性值有三个:
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。
如下图绘制不同模式三条线:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//绘制第一条线
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(50,10);
ctx.lineWidth="10";
ctx.lineCap="round";
ctx.stroke();
//绘制第二条线
ctx.beginPath();
ctx.moveTo(0,30);
ctx.lineTo(100,30);
ctx.lineWidth="10";
ctx.lineCap="square";
ctx.stroke();
//绘制第三条线
ctx.beginPath();
ctx.moveTo(10,50);
ctx.lineTo(100,50);
ctx.lineWidth="10";
ctx.lineCap="butt";
ctx.stroke();
lineJoin
设置或返回两条线相交时,所创建的拐角类型
包括三个属性值:
bevel:创建斜角。
round:创建圆角。
miter:默认。创建尖角。
如下图:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 开始绘制路径
ctx.beginPath();
// 路径宽度
ctx.lineWidth="10";
// 设置两线交叉边角的类型
ctx.lineJoin="round";
// 开始下笔,设置第一个点
ctx.moveTo(10,10);
ctx.lineTo(50,110);
ctx.lineTo(150,100);
ctx.stroke();
lineWidth
设置或返回当前的线条宽度,以像素计算。
ctx.lineWidth=10;
miterLimit
设置或返回最大斜接长度
定义和用法
miterLimit 属性设置或返回最大斜接长度。
斜接长度指的是在两条线交汇处内角和外角之间的距离。
提示:只有当 lineJoin 属性为 “miter” 时,miterLimit 才有效。
边角的角度越小,斜接长度就会越大。
为了避免斜接长度过长,我们可以使用 miterLimit 属性。
如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 “bevel” 类型来显示(图解 3):
代码如下:
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();
setLineDash()绘制虚线
setLineDash([a,b])中需要使用一个数组,a表示实线长度,b表示间隙长度。
代码:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//设置笔触为虚线样式,
ctx.setLineDash([10,5]);
ctx.strokeRect(30,30,100,80);