canvas用法（第一章节)

最新推荐文章于 2023-07-05 19:11:54 发布

罗会

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量579

点赞数 2

分类专栏： HTML 文章标签： canvas

本文链接：https://blog.csdn.net/qq_42238554/article/details/85628382

版权

HTML 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

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

罗会

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas用法（第一章节)

HTML5中用法定义和用法：HTML5使用canvas标签用于绘制图像，不过canvas本身没有绘制能力，它仅仅是图形的容器，必须使用脚本来完成实际的绘制任务。getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。标签定义图形，比如图表和其他图像。标签只是图形容器，您必须使用脚本来绘制图形。有两个属性：height设置canvas的高度。widt...
复制链接

扫一扫

专栏目录