HTML5绘图标签<canvas>学习笔记：绘制一片属于自己的星空

最新推荐文章于 2024-07-24 21:11:51 发布

置顶晨夕阳

最新推荐文章于 2024-07-24 21:11:51 发布

阅读量521

点赞数 1

文章标签： canvas html5 js

本文链接：https://blog.csdn.net/qq_29709177/article/details/93913561

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5绘图标签`<canvas>`学习笔记

canvas标签结合js可以绘制出形形色色的图案，只要你想象力够丰富；通过本文介绍了解其基础用法后进一步学习掌握canvas之后，你就可以绘制出非常有意思的图像。本文只介绍canvas最基本且常用的部分api，如果想查阅详细api，请移步 https://www.canvasapi.cn/

1.创建`<canvas>`

<body>
  <canvas id="cv"></canvas>
</body>

该标签相当于一个‘画布’，你可以在这块‘画布’上绘制各种各样的图案。

2.获取`<canvas>`标签dom对象，并设置宽高

var cv = document.getElementById("cv");

至此，我们已经获取到了该‘画布’对象，接下来我们需要给这块画布设置宽高，如下：

cv.width = 1200;
cv.height = 800;

为了便于调试，我们给这块‘画布’设置一个黑色的边框

border: solid 1px #000;

运行代码，如下图：

‘画布’设置好之后，我们马上要开始在这块1200*800的空间里秀操作了，首先让我们从最基础的操作开始。

3.获取‘画布’上下文getContext()

代码如下：

var ctx = cv.getContext("2d");

这句代码就相当于我们拿起了一支‘笔’，然后我们要用这支‘笔’在‘画布’上绘制各种图案。

4.开始绘制

简单的线条绘制

首先，我们从最简单的开始：画一条斜线，并设置斜线的宽度为10px，颜色为#f00

ctx.lineWidth = 10;			//设置线宽10px
ctx.strokeStyle = '#f00';	//设置颜色

ctx.moveTo(200, 200);		//设置斜线起始点坐标(200, 200)
ctx.lineTo(600, 600);		//设置斜线终止点坐标(600, 600)

ctx.stroke();				//绘制

运行结果：
在这里插入图片描述
canvas是基于状态的，moveTo(200, 200)表示将笔尖抬起移动到(200, 200)这个点，但是这个过程是不记录状态的，lineTo(600, 600)表示将笔尖移动到(600, 600)这个点，这个过程是记录状态的，也就是说当我们调用绘制方法stroke()时，绘制的是已经记录状态的路径，所以绘制出的结果是一条(200, 200)到(600, 600)两点之间的斜线。
然后，我们绘制三条折线，颜色分别为：红、蓝、绿

ctx.lineWidth = 10;

ctx.moveTo(200, 200);
ctx.lineTo(300, 300);
ctx.lineTo(200, 400);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.moveTo(300, 200);
ctx.lineTo(400, 300);
ctx.lineTo(300, 400);
ctx.strokeStyle = 'blue';
ctx.stroke();

ctx.moveTo(400, 200);
ctx.lineTo(500, 300);
ctx.lineTo(400, 400);
ctx.strokeStyle = 'green';
ctx.stroke();

运行结果如下：
在这里插入图片描述
我们发现，运行的结果和我们预想的不一样，导致这种结果的原因就是canvas是基于状态绘制的，上述绘制图案的属性会以最后设置的属性为准，即ctx.strokeStyle = ‘green’;线条颜色为绿色，之前的颜色设置都被最后这个设置覆盖。解决这种问题的办法就是在每次绘制之前调用beginPath()，表示接下来我要开始新的路径绘制。代码如下：

ctx.lineWidth = 10;

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 300);
ctx.lineTo(200, 400);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.beginPath();
ctx.moveTo(300, 200);
ctx.lineTo(400, 300);
ctx.lineTo(300, 400);
ctx.strokeStyle = 'blue';
ctx.stroke();

ctx.beginPath();
ctx.moveTo(400, 200);
ctx.lineTo(500, 300);
ctx.lineTo(400, 400);
ctx.strokeStyle = 'green';
ctx.stroke();

运行结果如下：
在这里插入图片描述
有beginPath()当然就有closePath()，我们举例来说明下closePath()的用法。以上，我们绘制的都是线，接下来我们绘制一个矩形，代码如下：

ctx.lineWidth = 10;
ctx.moveTo(400, 200);
ctx.lineTo(600, 200);
ctx.lineTo(600, 400);
ctx.lineTo(400, 400);
ctx.lineTo(400, 200);
ctx.strokeStyle = 'green';
ctx.stroke();

运行结果如下：
在这里插入图片描述
这里还可以使用closePath()进行闭合。代码如下：

ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(400, 200);
ctx.lineTo(600, 200);
ctx.lineTo(600, 400);
ctx.lineTo(400, 400);
// ctx.lineTo(400, 200);
ctx.closePath();
ctx.strokeStyle = 'green';
ctx.stroke();

运行效果同上。
当然，canvas提供了绘制矩形的方法，代码改写如下：

ctx.lineWidth = 10;
ctx.strokeStyle = 'green';
ctx.strokeRect(400, 200, 200, 200);//绘制一个原点(400, 200)，宽高为200的矩形

运行效果同上。
至此，我们已经可以绘制出形形色色的线条了，接下来我们绘制一个图案：四角星。

绘制四角星

绘制之前，我们需要找到四角星的绘制规律，四角星如下：
在这里插入图片描述
要绘制四角星，就要计算出其八个顶点的坐标，不难看出，四角星外角的四个点和内角的四个点分别在一大一小的圆心圆上，经分析如下：

根据上图，我们需要推导出四角星的八个点坐标…
思考中…
脑海中搜寻相关知识中…
n年后，放弃
翻箱倒柜中…
不知道多久后，终于找到以前的数学课本，经查阅后，得出：(Rcos(0°), -Rsin(0°))、(rcos(45°), -rsin(45°))、(Rcos(90°), -Rsin(90°))、(rcos(135°), -rsin(135°))、(Rcos(180°), -Rsin(180°))、(rcos(225°), -rsin(225°))、(Rcos(270°), -Rsin(270°))、(rcos(315°), -rsin(315°))，大家可能注意到y坐标都是负值，这是因为canvas中y坐标是向下的。
然后我们就要通过这些坐标点，看是不是有什么规律，也就是找它们的通项公式，查阅相关书籍后得出：
外角四个点坐标为：(Rcos(i90°), -Rsin(i90°))
内角四个点坐标为：(rcos(45+i90°), -rsin(45+i90°))，其中i=0,1,2,3，R为外圆半径，r为内圆半径。
代码如下：

// 四角星
function drawFour(ctx, x, y, R, r) {
  ctx.beginPath();
  ctx.fillStyle = "#fc0";
  for (var i=0; i<4; i++) {
    ctx.lineTo(R * Math.cos((i * 90) * (Math.PI / 180)) + x, 
      			- R * Math.sin((i * 90) * (Math.PI / 180)) + y);
    ctx.lineTo(r * Math.cos((45 + (i * 90)) * (Math.PI / 180)) + x, 
      			- r * Math.sin((45 + (i * 90)) * (Math.PI / 180)) + y);
  }
  ctx.fill();//填充
  ctx.closePath();
}

注意：需要将角度转为弧度，角度*(Math.PI / 180))
然后，我们在onload函数里面调用该方法，画一个四角星：

drawFour(ctx, 200, 200, 100, 50);

运行结果如下：
在这里插入图片描述
canvas提供了位置偏移方法translate()，我们使用该方法改写上述代码：

// 四角星
function drawFour(ctx, x, y, R, r, a) {
  ctx.beginPath();
  ctx.fillStyle = "#fc0";
  ctx.translate(x, y);	// 位置偏移
  for (var i=0; i<4; i++) {
    ctx.lineTo(R * Math.cos((i * 90) * (Math.PI / 180)), 
    			- R * Math.sin((i * 90) * (Math.PI / 180)));
    ctx.lineTo(r * Math.cos((45 + (i * 90)) * (Math.PI / 180)), 
    			- r * Math.sin((45 + (i * 90)) * (Math.PI / 180)));
  }
  ctx.fill();
  ctx.closePath();
}

运行效果同上。
我们希望四角星可以旋转一定的角度，可以使用方法rotate()实现：

function drawFour(ctx, x, y, R, r, a) {
  ctx.beginPath();
  ctx.fillStyle = "#fc0";			//设置填充颜色
  ctx.translate(x, y);				//偏移
  ctx.rotate(a * Math.PI / 180);	//旋转
  for (var i=0; i<4; i++) {
    ctx.lineTo(R * Math.cos((i * 90) * (Math.PI / 180)), 
    			- R * Math.sin((i * 90) * (Math.PI / 180)));
    ctx.lineTo(r * Math.cos((45 + (i * 90)) * (Math.PI / 180)), 
    			- r * Math.sin((45 + (i * 90)) * (Math.PI / 180)));
  }
  ctx.fill();	//填充图案
  ctx.closePath();
}

调用：

drawFour(ctx, 200, 200, 100, 50, 30);

运行结果如下：
在这里插入图片描述
canvas还提供了缩放方法scale()，也可以使用transform()方法替换绘图的当前转换矩阵来设置偏移，旋转，缩放等等，这些就不一一介绍了，感兴趣的可以自己去试试。

注意：使用scale、rotate、translate时，会遇到很多问题，以下用translate举例说明其中一种我经常遇到的问题。请看如下代码：

ctx.lineWidth = 10;
ctx.strokeStyle = "#f00";
ctx.translate(100, 100);
ctx.strokeRect(0, 0, 100, 100);

ctx.strokeStyle = "#fc0";
ctx.translate(100, 100);
ctx.strokeRect(100, 100, 100, 100);

以上代码绘制了边框为红黄两个矩形，我们期望的是下图这样子的：
在这里插入图片描述
但，实际运行结果是这样子的：

第一个绘制的红框是正常的，但是第二个绘制的黄框多偏移了100px，导致这种情况的原因也是canvas基于状态绘制，第一个translate设置的偏移100px的状态会被记录下来，所以第二次绘制的时候会在上一次的基础上绘制，最终导致第二次绘制的黄框偏移了200px。解决这个问题就需要在每次绘制开始的时候使用ctx.save();保存当前状态，绘制结束后使用ctx.restore();返回之前保存过的状态和属性。代码修改如下：

ctx.lineWidth = 10;
ctx.strokeStyle = "#f00";
ctx.save();
ctx.translate(100, 100);
ctx.strokeRect(0, 0, 100, 100);
ctx.restore();

ctx.strokeStyle = "#fc0";
ctx.save();
ctx.translate(100, 100);
ctx.strokeRect(100, 100, 100, 100);
ctx.restore();

运行结果如下：
在这里插入图片描述

下面，我们要开始学习更加酷炫的技能：渐变。

5.渐变

渐变包括线性渐变和环形渐变，我们一个一个来学习。

线性渐变

创建线性渐变，javaScript语法：

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

其中：

x0：渐变开始点的 x 坐标
y0：渐变开始点的 y 坐标
x1：渐变结束点的 x 坐标
x2：渐变结束点的 y 坐标

规定渐变对象中的颜色和停止位置，JavaScript 语法：

gradient.addColorStop(stop,color);

其中：

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

以上，非常详细的介绍了线性渐变的api，如果还有疑问可以自己再找资料查阅。
好的，实现线性渐变的方法我们已经掌握了，接下来就是实战了，我们画一个颜色渐变的矩形，代码如下：

var ctx = cv.getContext('2d');

var lg = ctx.createLinearGradient(0, 0, 400, 400);
lg.addColorStop(0, '#f00');
lg.addColorStop(1, '#fc0');
ctx.fillStyle = lg;
ctx.fillRect(0, 0, 400, 400);

运行结果如下：
在这里插入图片描述
还可以这样：

var ctx = cv.getContext('2d');

var lg = ctx.createLinearGradient(0, 0, 400, 400);
lg.addColorStop(0, '#fff');
lg.addColorStop(0.3, '#f00');
lg.addColorStop(0.6, '#fc0');
lg.addColorStop(1, '#C71585');
ctx.fillStyle = lg;
ctx.fillRect(0, 0, 400, 400);

运行结果如下：
在这里插入图片描述

环形渐变

环形渐变也称为放射性渐变。
创建放射状/环形的渐变，JavaScript 语法：

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

其中：

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

环形渐变也会使用addColorStop(stop,color)设置颜色。我们画一个环形渐变的矩形，代码如下：

var rg = ctx.createRadialGradient(200, 200, 0, 200, 200, 180);
rg.addColorStop(0, '#f00');
rg.addColorStop(1, '#fc0');
ctx.fillStyle = rg;
ctx.fillRect(0, 0, 400, 400);

运行结果如下：
在这里插入图片描述
通过上述案例，细心的同学可能会发现，fillStyle属性不仅可以设置颜色值，还可以设置渐变对象。

重复指定元素createPattern()

createPattern()可以在指定的方向上重复指定的元素，JavaScript 语法：

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

其中：

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

通过上面的介绍，可以看到不仅可以重复图片，还可以重复视频和画布，本文只介绍图片和画布这两种情况，视频元素的重复需要大家自行研究。

图片

原始图片如下：
在这里插入图片描述
代码如下：

var image = new Image();
image.src = 'timg.jpg';
image.onload = function() {	//等待图片加载完毕
  var p = ctx.createPattern(image, 'repeat');
  ctx.fillStyle = p;
  ctx.fillRect(0, 0, 1200, 800);
};

运行结果如下：
在这里插入图片描述

画布

首先，创建一块100*100的‘画布’：

function createCanvas() {
  var cv = document.createElement('canvas');
  cv.width = 100;
  cv.height = 100;

  var ctx = cv.getContext('2d');
  drawFour(ctx, 50, 50, 50, 20, 0);
  return cv;
}

该‘画布’中调用四角星例子中的drawFour方法绘制了一个四角星。然后，我们将重复绘制这块‘画布’：

var ctx = cv.getContext('2d');
var canvas = createCanvas();
var p = ctx.createPattern(canvas, 'repeat');
ctx.fillStyle = p;
ctx.fillRect(0, 0, 1200, 800);

运行结果如下：
在这里插入图片描述

6.实战小案例

通过以上的学习，我们已经掌握了canvas的一些基本用法，那么我们小试牛刀，用以上的知识点绘制一片星空。
相信通过上面的介绍，大家已经跃跃欲试了，废话不多说，直接贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="cv"></canvas>
</body>
<script>
  window.onload = function() {
    var cv = document.getElementById('cv');
    cv.width = 1200;
    cv.height = 800;

    var ctx = cv.getContext('2d');

	//渐变的天空
    var lg = ctx.createLinearGradient(0, 0, 0, cv.height);
    lg.addColorStop(0, '#000');
    lg.addColorStop(1, '#191970');
    ctx.fillStyle = lg;
    ctx.fillRect(0, 0, 1200, 800);

	//绘制星星
    for (var i=0; i<200; i++) {
      var x = Math.random() * cv.width;
      var y = Math.random() * cv.height;
      var R = Math.random() * 10;
      var r = R / 2;
      var a = Math.random() * 360;
      ctx.save();
      drawFour(ctx, x, y, R, r, a);
      ctx.restore();
    }
  }

  // 四角星
  function drawFour(ctx, x, y, R, r, a) {
    ctx.beginPath();
    ctx.fillStyle = "#F0FFFF";
    ctx.translate(x, y);
    ctx.rotate(a * Math.PI / 180);
    for (var i=0; i<4; i++) {
      ctx.lineTo(R * Math.cos((i * 90) * (Math.PI / 180)), 
      				- R * Math.sin((i * 90) * (Math.PI / 180)));
      ctx.lineTo(r * Math.cos((45 + (i * 90)) * (Math.PI / 180)), 
      				- r * Math.sin((45 + (i * 90)) * (Math.PI / 180)));
    }
    ctx.fill();
    ctx.closePath();
  }
</script>
</html>

运行结果如下：
在这里插入图片描述
是不是非常的酷炫。
至此，关于canvas的部分api的介绍就告一段落了。本文只介绍了canvas绘制直线的一些api，曲线的绘制以后还会做介绍。大家加油！再会

如果大家觉得文字学习起来太累，可以看这位老师的视频，免费的哦：
https://www.imooc.com/learn/185

首先，我是一个程序员。

晨夕阳

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
HTML5绘图标签<canvas>学习笔记：绘制一片属于自己的星空

HTML5新增绘图标签<canvas>学习笔记canvas标签结合js可以绘制出形形色色的图案，只有你想象力够丰富，并且通过本文介绍熟练使用canvas之后，你就可以绘制出非常有意思的图像。本文只介绍canvas最基本且常用的api，如果想查阅详细api，请移步 https://www.canvasapi.cn/。1.创建<canvas><body>...
复制链接

扫一扫