HTML5 -- Canvas-CSDN博客

本文链接：https://blog.csdn.net/gxgalaxy/article/details/108172330

文章目录

canvas 元素用于在网页上绘制图形。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

1.定义

规定宽度高度样式

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000"></canvas>

2.常用属性和方法

属性

属性	解释
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
lineWidth	设置或返回当前的线条宽度

方法

方法	解释
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
rect()	创建矩形
fillRect()	绘制“被填充”的矩形
strokeRect()	绘制矩形（无填充）
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图

3.步骤

定义canvas
JavaScript中找到canvas元素
创建context元素

var cxt=c.getContext(“2d”);

4.矩形

（1）方法一：

 <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.moveTo(0, 0);//起点 路径从哪里开始
    ctx.lineTo(0, 100);//开始创建路径
    ctx.lineTo(100, 100);
    ctx.lineTo(100,0)
    ctx.closePath();//如果路径线是相连的，就闭合，只针对一次绘制
    ctx.stroke();//绘制出通过 moveTo() 和 lineTo() 方法定义的路径
  </script>

（2）方法二： rect()

 <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.rect(0,0,100,100); // 初始x,y,宽,高
    ctx.stroke(); //绘制图形
  </script>

（3）方法三：strokeRect()

  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.strokeRect(0,0,100,100);
  </script>

在这里插入图片描述

（4）使用fillRect()方法：

绘制出来的矩形是被填充的：

<script>
      var canvas = document.getElementsByTagName('canvas')[0];
      var ctx = canvas.getContext('2d');
      ctx.fillRect(0,0,100,100);
</script>

在这里插入图片描述

5.线条的属性

（1）.lineCap()

只能用于开始和结尾处，不能用于连接
butt：默认值，没有
round：圆形
square：方形

<body>
  <canvas width="400" height="400" style="border:1px solid black"></canvas>
  <script>
    let canvas = document.getElementsByTagName('canvas')[0];
    let ctx = canvas.getContext('2d');
    
    ctx.lineWidth = 10;
    ctx.strokeStyle = 'blue';

    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(100,100);
    ctx.lineCap = 'butt';
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(10,60);
    ctx.lineTo(100,200);
    ctx.lineCap = 'round';
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(10,100);
    ctx.lineTo(100,300);
    ctx.lineCap = 'square';
    ctx.stroke();
  </script>
</body>

在这里插入图片描述

6.圆形

通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI
语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x:圆心的x坐标
y:圆心的y坐标
r:圆的半径
sAngle:起始角
eAngle:结束角，以弧度计
counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

<body>
  <canvas id="myCanvas" width="200" height="200" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.arc(100,100,60,0,Math.PI*2,true);
    ctx.stroke();
  </script>
</body>

在这里插入图片描述

7.二次贝塞尔曲线 quadraticCurveTo

第一个点是控制点，第二个点是结束点
在这里插入图片描述

<body>
  <canvas id="myCanvas" width="300" height="300" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.moveTo(20,20);
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();
  </script>
</body>

在这里插入图片描述

8.三次贝塞尔曲线 bezierCurveTo

三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。
在这里插入图片描述

<body>
  <canvas id="myCanvas" width="300" height="300" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.moveTo(20,20);
    ctx.bezierCurveTo(20,100,200,100,200,20);
    ctx.stroke();
  </script>
</body>

在这里插入图片描述

9.图形变换(平移缩放)

rotate() 方法旋转当前的绘图。
translate() 方法重新映射画布上的 (x,y) 位置。

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.translate(100,100);
    ctx.rotate(20*Math.PI/180);
    ctx.fillRect(0,0,100,100);
  </script>
</body>

在这里插入图片描述
scale() 方法缩放当前绘图，更大或更小。

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0,0,100,100);
    ctx.scale(2,2); //放大
    ctx.fillRect(0,0,100,100);
  </script>
</body>

10.状态保存：save restore

当我们在使用translate绘图的时候，我们会发现一个弊端，如下代码

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.translate(100,100);
    ctx.fillRect(0,0,100,100);

    ctx.fillStyle = 'green';
    ctx.translate(200,200);
    ctx.fillRect(0,0,100,100);
  </script>
</body>

在这里插入图片描述
我们设置的绿色的方块的起始点是（200,200）但是在实际效果中我们会发现，绿色方块的起始点是（300,300）这是因为在canvas中图形变换函数是叠加的，因此当我们绘制绿色方块的时候ctx.translate(100,100);和ctx.translate(200,200);同时起了作用。
为了避免这种影响我么可以在使用图形变化后将变换逆转过来

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.translate(100,100);
    ctx.fillRect(0,0,100,100);
    ctx.translate(-100,-100);
    
    ctx.fillStyle = 'green';
    ctx.translate(200,200);
    ctx.fillRect(0,0,100,100);
    ctx.translate(-200,-200);
  </script>
</body>

在这里插入图片描述
canvas提供了save restore
save(): 保存当前所有图形的状态
restore():返回在save这个节点的时候canvas的所有状态

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    // 保存当前所有图形的状态
    ctx.save();
    ctx.fillStyle = 'red';
    ctx.translate(100,100);
    ctx.fillRect(0,0,100,100);
    ctx.restore(); //返回在save这个节点的时候canvas的所有状态

    ctx.save();
    ctx.fillStyle = 'green';
    ctx.translate(200,200);
    ctx.fillRect(0,0,100,100);
    ctx.restore();
  </script>
</body>

在这里插入图片描述

11.线性渐变 LinearGradient

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

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

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    // 创建渐变的样式
    var linearBg = ctx.createLinearGradient(0,0,400,400);
    linearBg.addColorStop(0,'pink');
    linearBg.addColorStop(0.25,'yellow');
    linearBg.addColorStop(0.5,'blue');
    linearBg.addColorStop(0.75,'#ddfaad');
    linearBg.addColorStop(1,'blue');
    ctx.fillStyle = linearBg;
    ctx.fillRect(0,0,400,400);
  </script>
</body>

在这里插入图片描述

12.放射状/圆形渐变

利用不同的圆心半径绘制不同的效果

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

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

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    var linearBg = ctx.createRadialGradient(200,200,100,200,200,200);
    linearBg.addColorStop(0,'pink');
    linearBg.addColorStop(0.25,'yellow');
    linearBg.addColorStop(0.5,'blue');
    linearBg.addColorStop(0.75,'#ddfaad');
    linearBg.addColorStop(1,'blue');
    ctx.fillStyle = linearBg;
    ctx.fillRect(0,0,400,400);
  </script>
</body>

在这里插入图片描述

13.图片填充

<body>
  <canvas width="400" height="400" style="border:1px solid black"></canvas>
  <script>
    let canvas = document.getElementsByTagName('canvas')[0];
    let ctx = canvas.getContext('2d');
    let img = new Image();
    img.src = './1.jpg';
    //放置图片未加载完毕就开始绘制
    img.onload = ()=>{
      ctx.beginPath();
      var bg = ctx.createPattern(img,'no-repeat');
      ctx.fillStyle = bg;
      ctx.font = '40px Georgia'
      ctx.fillRect(0,0,200,200)
    }
  </script>
</body>

14.文字渲染

context.fillText(text,x,y,maxWidth);

text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.font = '40px Georgia';
    ctx.fillStyle = 'red';
    ctx.fillText('Canvas',100,100);
  </script>
</body>

在这里插入图片描述

<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.font = '40px Georgia';
    var linearBg = ctx.createRadialGradient(200,200,100,200,200,200);
    linearBg.addColorStop(0,'pink');
    linearBg.addColorStop(0.25,'yellow');
    linearBg.addColorStop(0.5,'blue');
    linearBg.addColorStop(0.75,'#ddfaad');
    linearBg.addColorStop(1,'blue');
    ctx.fillStyle = linearBg;
    ctx.fillText('Canvas',100,100);
  </script>
</body>