分享篇：Canvas绘制简单图像

小姚学前端

已于 2023-09-15 18:44:57 修改

阅读量407

点赞数 1

文章标签： canva可画 javascript html5

于 2023-09-15 00:08:50 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/132892346

版权

Canvas绘制简单图形需要用到的基本知识：

1.moveTo()

2. lineTo()

3.stroke()

4.strokeStyle/lineWidth

5.beginPath()

6.closePath()

7.arc（）

8.createLinearGradient（）

9.createRadialGradient（）

10.createConicGradient（）

Canvas绘制简单图形需要用到的基本知识：

1.moveTo()

移动到起始点：使用 moveTo() 方法将画笔移动到直线的起始点。这个方法接受 x 和 y 坐标作为参数，用于指定起始点的位置。

2. lineTo()

画直线：使用 lineTo() 方法绘制直线。它接受 x 和 y 坐标作为参数，用于指定直线的终点位置。

3.stroke()

描边路径：使用 stroke() 方法来描绘路径，即绘制直线。这个方法会将路径上的线条以当前设置的属性进行描边。

4.strokeStyle/lineWidth

设置线条属性：要绘制直线，你需要设置一些线条属性，如线条的颜色、宽度、端点样式等。可以使用上下文对象的属性来设置这些属性。例如，使用 context.strokeStyle 来设置线条的颜色，使用 context.lineWidth 来设置线条的宽度。

5.beginPath()

开始路径：在绘制直线之前，需要使用 beginPath() 方法来开始一个新的路径。这个方法会将当前路径重置为空路径，以便开始绘制新的路径。

6.closePath()

用于创建一个从当前路径绘制到起始点的路径段，并闭合路径。

7.arc（）

arc() 是 Canvas 上的一个方法，用于绘制弧形或圆形。arc(圆心,圆心,半径,圆弧的起始点，x 轴方向开始计算，单位以弧度表示。,圆弧的终点，单位以弧度表示。，可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制);

8.createLinearGradient（）

用于创建一个线性渐变对象，可以用于填充或描边图形。createLinearGradient(x0, y0, x1, y1) 方法接受四个参数来指定线性渐变的起点和终点的坐标：(x0, y0)：渐变起点的坐标。(x1, y1)：渐变终点的坐标。

9.createRadialGradient（）

创建一个径向渐变对象，可以用于填充或描边图形。

createRadialGradient(x0, y0, r0, x1, y1, r1) 方法接受六个参数来指定径向渐变的起点、半径和终点的坐标：

(x0, y0)：渐变起点的坐标。

r0：起点的半径。

(x1, y1)：渐变终点的坐标。

r1：终点的半径。

10.createConicGradient（）

锥形渐变这个方法目前还没有广泛的浏览器支持createConicGradient（45*(Math.PI)/180,100,100）

第一个参数 45*(Math.PI)/180 表示渐变的起始角度。在这里，它被设置为 45 度（π/4 弧度）。您可以根据需要进行角度的转换，例如将度数转换为弧度。

第二个参数 100 表示渐变的中心点的 x 坐标。在此示例中，将中心点设置为(100,100)。第三个参数 100 表示渐变的中心点的 y 坐标。同样，在此示例中，中心点的 y 坐标也设置为 100。

11.addColorStop()

addColorStop是Canvas API中的一个方法，用于向渐变对象添加颜色停止点。

12.ellipse（）

绘制椭圆，ellipse(300,200,10,30,0,0,2*Math.PI) 他的参数含义如下：

改变第一个参数（中心点的 x 坐标）会移动椭圆在 x 轴上的位置。
改变第二个参数（中心点的 y 坐标）会移动椭圆在 y 轴上的位置。
改变第三个参数（半长轴长度）会改变椭圆在横向上的大小。
改变第四个参数（半短轴长度）会改变椭圆在纵向上的大小。
改变第五个参数（旋转角度）会旋转椭圆。如果为非零值，椭圆将按照给定的角度沿逆时针方向进行旋转。
改变第六个参数（起始角度）会改变椭圆的绘制起始位置。可以使用不同的弧度值来确定绘制椭圆的起点。
改变第七个参数（结束角度）会改变椭圆的绘制结束位置。可以使用不同的弧度值来确定绘制椭圆的结束点。

13.fill()

fill() 函数通常是用来填充形状内部的方法。它会基于当前设置的填充样式（例如颜色、渐变或图案）将形状的内部区域进行填充。

绘制直线

绘制直线需要用到moveTo() lineTo() stroke()等方法，演示代码如下。需要注意的是，moveTo() lineTo()参数是坐标位置 x，y moveTo() lineTo()分别对应直线的起点和终点。

示例

<script>
    //1.创建 canvas 标签
    let canvas = document.createElement('canvas');
    canvas.width= 600;
    canvas.height = 400;
    document.body.append(canvas)
    //2.得到 context 对象
    let context = canvas.getContext('2d');
    //3.画直线  
    //3.1起点
    context.moveTo(100,100);  //moveTo() 起点
    //3.2终点  
    context.lineTo(300,100);  //lineTo通过lineTo 把线画到什么地方
     //3.3调用画线的方法
     context.stroke();
</script>

绘制折线

绘制折线需要的用到moveTo() lineTo() stroke()，折线的绘制和直线的绘制原理一致，使用moveTo()规定折线的起点，lineTo(),规定折线需要经过的位置，再使用stroke()绘制路径即可。

示例

<script>
      //1.创建 canvas 标签
    let canvas = document.createElement('canvas');
    canvas.width= 600;
    canvas.height = 400;
    canvas.style.background = 'pink';
    document.body.append(canvas)
    //2.得到 context 对象
    let context = canvas.getContext('2d');
    //3.画折线  
    //3.1起点
    context.moveTo(100,100)
    //3.2使用lineto 依次经过
    context.lineTo(200,200);
    context.lineTo(300,100);
    context.lineTo(400,200);
    //3.3使用 stroke 画图
    context.stroke();
</script>

绘制多边形

有了上面两个例子我们再来绘制多边形会简单很多，绘制多边形和绘制直线折线本质上都是一样的，使用moveTo（）规定起点，lineTo（）规定需要经过的点，再使用stroke（）绘制路径即可。下面是一个绘制三角形的例子以供参考。

绘制三角形示例

<script>
     //1.创建 canvas 标签
  let canvas = document.createElement('canvas');
  canvas.width= 600;
  canvas.height = 400;
  document.body.append(canvas)
  //2.得到 context 对象
  let context = canvas.getContext('2d');

  context.moveTo(100,300);
  context.lineTo(100,100);
  context.lineTo(400,100);
  // context.lineTo(230,159);
  context.lineTo(100,300)
  context.stroke();
</script>

绘制笑脸

绘制笑脸需要用到arc()，beginPath()，等方法,需要使用beginPath（）创建新的路径绘制每个圆时都会使用 stroke() 方法，默认情况下，绘制的路径会沿着之前的路径绘制，形成相互连接的效果，而这些圆之间是相互连接的。closePath()是配合的beginPath()api 闭合路径，使用fill()对其填充颜色。

示例

<script>
     //1.创建 canvas 标签
  let canvas = document.createElement('canvas');
  canvas.width= 600;
  canvas.height = 400;
  document.body.append(canvas)
  //2.得到 context 对象
  let context = canvas.getContext('2d');
//   修改填充图形的颜色
let g = context.createRadialGradient(250,150,0,250,150,150);
g.addColorStop(0,'#ffde00')
g.addColorStop(1,'#f60')
context.fillStyle = g;

  //画笑脸
  //先画大圆
  context.arc(300,200,100,0*Math.PI/180,360*Math.PI/180);
//   把大圆填充
  context.fill(); //填充颜色
  context.stroke();
  
  //画左眼
  //在两个不相关的图像之间，需要告诉 context，需要从新生产一个新的路径
  context.beginPath();
  context.arc(250,150,20,0,2*Math.PI);
  context.stroke();
//   有一个同配合的api 闭合路径
  context.closePath();
  //画右眼
  context.beginPath();
  context.arc(350,150,20,0,2*Math.PI);
  context.stroke();
  context.closePath();
 
  //画鼻子
  context.beginPath();
  context.ellipse(300,200,10,30,0,0,2*Math.PI) //椭圆
  context.stroke();
  context.closePath();
  
//   画嘴巴
  context.beginPath();
  context.arc(300,200,80,0,Math.PI);
  context.stroke();
  context.closePath();
</script>

效果图

渐变效果

线性渐变

let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');

// 创建线性渐变对象
let gradient = context.createLinearGradient(0, 0, 200, 0);
// 设置渐变的颜色
gradient.addColorStop(0, 'red');     // 起点颜色为红色
gradient.addColorStop(1, 'blue');    // 终点颜色为蓝色

// 使用线性渐变填充矩形
context.fillStyle = gradient;
context.fillRect(50, 50, 200, 100);

在上述示例中，首先使用 createLinearGradient() 方法创建一个线性渐变对象。起点坐标为 (0, 0)，终点坐标为 (200, 0)，即水平从左到右的渐变。然后，通过 addColorStop() 方法设置渐变的颜色。在本例中，起点颜色设置为红色（位置比例为 0），终点颜色设置为蓝色（位置比例为 1）。最后，使用 fillRect() 方法绘制一个矩形，并使用线性渐变对象作为填充样式，使矩形按照渐变色进行填充。

示例折线渐变

<script>
     //1.创建 canvas 标签
  let canvas = document.createElement('canvas');
  canvas.width= 600;
  canvas.height = 400;
  document.body.append(canvas)
  //2.得到 context 对象
  let context = canvas.getContext('2d');
  //把线条加粗
  context.lineWidth=10;
  //实现渐变
  let g = context.createLinearGradient(100,200,300,400);
  g.addColorStop(0,'yellow');
  g.addColorStop(0.25,'orange');
  g.addColorStop(0.5,'pink');
  g.addColorStop(1,'purple');
  //把渐变赋值给 context折线
  context.strokeStyle = g;
  //3.先把折线画出来
  context.moveTo(100,200);
  context.lineTo(200,100);
  context.lineTo(100,300);
  context.lineTo(300,400)
  context.stroke();

</script>

径向渐变

let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');

// 创建径向渐变对象
let gradient = context.createRadialGradient(100, 100, 50, 100, 100, 150);
// 设置渐变的颜色
gradient.addColorStop(0, 'red');     // 起点颜色为红色
gradient.addColorStop(1, 'blue');    // 终点颜色为蓝色

// 使用径向渐变填充圆形
context.fillStyle = gradient;
context.arc(100, 100, 100, 0, 2 * Math.PI);
context.fill();

在上述示例中，首先使用 createRadialGradient() 方法创建一个径向渐变对象。起点坐标为 (100, 100)，起点半径为 50，终点坐标为 (100, 100)，终点半径为 150。这表示渐变从圆心起点开始，从半径为 50 的位置渐变到半径为 150 的位置。然后，通过 addColorStop() 方法设置渐变的颜色。在本例中，起点颜色设置为红色（位置比例为 0），终点颜色设置为蓝色（位置比例为 1）。最后，使用 arc() 方法绘制一个圆形，并使用径向渐变对象作为填充样式，使圆形按照渐变色进行填充。

锥形渐变

<script>
    //1.创建 canvas 标签
  let canvas = document.createElement('canvas');
  canvas.width= 600;
  canvas.height = 400;
  document.body.append(canvas)
  //2.得到 context 对象
  let context = canvas.getContext('2d');
  //渐变
//   创建径向渐变对象
//第一个参数是一个弧度值，如果想要以角度来计算，需要转换一下

 let gradient=  context.createConicGradient(45*(Math.PI)/180,100,100) 
 gradient.addColorStop(0,'red');
 gradient.addColorStop(0.5,'green')
 gradient.addColorStop(1,'red');
//把渐变赋给画笔
context.fillStyle = gradient;
 context.fillRect(0,0,200,200);

</script>

小姚学前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
分享篇：Canvas绘制简单图像

绘制笑脸需要用到arc()，beginPath()，等方法,需要使用beginPath（）创建新的路径绘制每个圆时都会使用 stroke() 方法，默认情况下，绘制的路径会沿着之前的路径绘制，形成相互连接的效果，而这些圆之间是相互连接的。绘制折线需要的用到moveTo() lineTo() stroke()，折线的绘制和直线的绘制原理一致，使用moveTo()规定折线的起点，lineTo(),规定折线需要经过的位置，再使用stroke()绘制路径即可。同样，在此示例中，中心点的 y 坐标也设置为 100。
复制链接

扫一扫