Canvas的JS操作基本功

最新推荐文章于 2024-05-27 11:26:55 发布

Keen__

最新推荐文章于 2024-05-27 11:26:55 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/qq937654393/article/details/102336016

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

创建 Canvas 画布

Canvas没有设置宽高，那么会自动创建一个 300 * 150 的画布（单位默认为 px）。
可以通过html属性设置或JS 属性设置 width、height。不要使用 CSS 设置，CSS的宽高设置会影响canvas的宽高比例。如下代码为用html属性设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            background: #000;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">

</canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = 'rgb(255,255,255)';
    context.fill();
</script>
</body>
</html>

获取 Canvas 对象

创建了一个 Canvas 画布，获取到 Canvas 的上下文环境，对应的语法为：canvas.getContext(contextType, contextAttributes);

上下文类型（contextType）可选值：

2dc：代表一个二维渲染上下文
webgl（或"experimental-webgl"）：代表一个三维渲染上下文
webgl2（或"experimental-webgl2"）：代表一个三维渲染上下文；这种情况下只能在浏览器中实现 WebGL 版本2 (OpenGL ES 3.0)。

绘制路径

使用 Canvas 画一个点

使用 Canvas 画一个点。其实画一个点也就相当于画一个半径为 1 的圆。

context.beginPath();       // 起始一条路径，或重置当前路径
context.arc(100, 100, 1, 0, Math.PI * 2, true);  // 创建弧/曲线
context.closePath();       // 创建从当前点回到起始点的路径
context.fillStyle = 'rgb(255,255,255)'; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fill();            // 填充当前绘图（路径）

了解了在 Canvas 中绘图的大致步骤，下面我们来看一下刚刚提到的 arc() 方法。

绘制弧/曲线

arc() 方法创建弧/曲线

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

x：圆心的 x 坐标
y：圆心的 y 坐标
r：圆的半径
sAngle：起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
eAngle：结束角，以弧度计
counterclockwise：可选。规定应该逆时针还是顺时针绘图。false 为顺时针，true 为逆时针。
通过代码画一个四分之一的圆弧：

    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 0.5, false);
    context.strokeStyle="white";
    context.stroke();

此时图形不是闭合的，因为我只设置了 beginPath 并没有设置 closePath。

设置closePath后效果如下。

此时的闭合图形内的空心的，这是因为 stroke() 和 fill() 的区别。两个函数的区别：一个是描边，一个是填充。

绘制直线

    context.beginPath();
    context.moveTo(50,50); // 移动画笔位置，不创建线条
    context.lineTo(100,100); // 绘制线段的结束点
    context.strokeStyle = '#fff'; // 设置样式
    context.stroke();

在绘制了直线之后，我们来看一下context给绘制的直线添加样式的属性：

lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度

矩形等其他图形绘制大同小异，这里不列举了。

颜色、样式和阴影

上述绘制图形的方法都是通过先创建路径，然后再使用 fill() 或 stroke() 进行填充或者描边。

下面我们再具体看一下都可以给路径设置哪些属性来改变其样式。

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

设置shadow的四个属性跟css的box-shadow用法差不多。

设置渐变

createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置

其中绘制渐变主要用到了 createLinearGradient() 方法，我们来看一下这个方法： context.createLinearGradient(x0,y0,x1,y1);，这个方法表示创建一个从(x0,y0)到(x1,y1)渐变的style对象。我们可以使用 addColorStop(stop,color) 方法来设置渐变的颜色。

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

具体如何使用呢，比如说我们下一个粉色到白色的由上向下的渐变：

var grd = context.createLinearGradient(100,100,100,200);
grd.addColorStop(0,'pink');
grd.addColorStop(1,'white');

context.fillStyle = grd;
context.fillRect(100,100,200,200);

图形转换

scale(x,y) 缩放当前绘图至更大或更小
rotate(angle) 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵，然后运行 transform()

缩放

使用 Canvas 实现缩放的功能，绘制一个矩形；放大到 200%，再次绘制矩形；放大到 200%，然后再次绘制矩形；放大到 200%，再次绘制矩形。

context.strokeStyle = 'white';
context.strokeRect(5,5,50,25);
context.scale(2,2);
context.strokeRect(5,5,50,25);
context.scale(2,2);
context.strokeRect(5,5,50,25);

设置 scale() 方法之后再设置的矩形，无论是线条的宽度还是坐标的位置，都被放大了。并且 scale() 的效果是可以叠加的。

旋转

context.rotate(angle)

angle : 旋转角度，以弧度计。如需将角度转换为弧度，请使用 degreesMath.PI/180 公式进行计算。举例：如需旋转 5 度，可规定下面的公式：5Math.PI/180。

注意：使用的图形变换的方法都是作用在画布上的，既然对画布进行了变换，那么在接下来绘制的图形都会变换。比如我对画布使用了 rotate(20*Math.PI/180) 方法，就是将画布旋转了 20°，然后之后绘制的图形都会旋转 20°。

图像绘制

drawImage()是canvas的一个常用方法。用于向画布上绘制图像、画布或视频。
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img：规定要使用的图像、画布或视频
sx：可选。开始剪切的 x 坐标位置
sy：可选。开始剪切的 y 坐标位置
swidth：可选。被剪切图像的宽度
sheight：可选。被剪切图像的高度
x：在画布上放置图像的 x 坐标位置
y：在画布上放置图像的 y 坐标位置
width：可选。要使用的图像的宽度（伸展或缩小图像）
height：可选。要使用的图像的高度（伸展或缩小图像）

特效的源码地址：sunshine940326/canvas

Keen__

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Canvas的JS操作基本功

创建 Canvas 画布Canvas没有设置宽高，那么会自动创建一个 300 * 150 的画布（单位默认为 px）。可以通过html属性设置或JS 属性设置 width、height。不要使用 CSS 设置，CSS的宽高设置会影响canvas的宽高比例。如下代码为用html属性设置。<!DOCTYPE html><html lang="en"><head&...
复制链接

扫一扫

专栏目录