html5 -- canvas使用(1)

canvas

设置canvas标签添加宽高默认单位为px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas1 {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas width="300" height="150" id="canvas1"></canvas>
    <script>
      var canvas = document.getElementById('canvas1');
    </script>
  </body>
</html>

getContext()

设置上下文的类型

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

ctx可以看做是一个画笔

fillStyle

设置填充的样式

      ctx.fillStyle = 'orange';

fillRect

ctx.fillRect(x, y, width, height);
有四个参数设置x,y方向坐标与宽高值

      ctx.fillRect(50, 50, 100, 100);

clearRect

清除中间的区域
四个参数设置x,y方向坐标与宽高值

      ctx.clearRect(75, 75, 50, 50);

在这里插入图片描述

strokeRect

带轮廓的矩形
四个参数设置x,y方向坐标与宽高值

      ctx.strokeStyle(50, 50, 100, 100);

strokeStyle

设置轮廓矩形的样式

      ctx.strokeStyle = 'orange';

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas1 {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas width="300" height="150" id="canvas1"></canvas>
    <script>
      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.strokeStyle = 'orange';
      ctx.strokeRect(50, 50, 100, 100);
    </script>
  </body>
</html>

在这里插入图片描述

创建移动路径

1.创建一个路径beginPath
2.使用画图命令画出路径
3.一旦路径被创建出来的化就可以通过描边或填充路径区域来渲染图形

直线

beginPath

创建一个路径

ctx.beginPah()

moveTo

起始位置参数是坐标

stx.moveTo(50, 50)

lineTo

表示直线到哪个位置参数是坐标

ctx.lineTo(100, 100)

stroke

路径显示

ctx.stroke()

lineWidth

设置线宽

ctx.lineWidth = 10

在这里插入图片描述

closePath

闭合路径

绘制三角形

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.strokeStyle = 'orange';
      ctx.moveTo(50, 50);
      ctx.lineWidth = 10;
      ctx.lineTo(150, 50);
      ctx.lineTo(100, 100);
      ctx.closePath();
      ctx.stroke();

在这里插入图片描述

arc

画圆形
arc(x,y, startAngle, endAngle, anticlockwise)

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(70, 70, 50, 0, 2 * Math.PI);
      ctx.stroke();

在这里插入图片描述
最后一个参数false为顺时针画 true为逆时针

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(70, 70, 50, 0, (Math.PI / 180) * 90);
      ctx.stroke();

在这里插入图片描述

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(70, 70, 50, 0, (Math.PI / 180) * 90, true);
      ctx.stroke();

在这里插入图片描述

arcTo

画圆弧路径
arcTo(x1, y1, x2, y2 ,radius)
前四个为控制点的坐标

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(150, 20);
      ctx.arcTo(150, 100, 50, 20, 30);
      ctx.lineTo(50, 20);
      ctx.stroke();

      //基础点
      ctx.fillStyle = 'blue';
      ctx.fillRect(150, 20, 10, 10);
      ctx.fillStyle = 'red';
      //控制点k1
      ctx.fillRect(150, 100, 10, 10);
      //控制点k2
      ctx.fillRect(50, 20, 10, 10);

在这里插入图片描述

quadraticCurveTo

二次贝塞尔曲线
quadraticCurveTo(ctx, cty, x, y)
控制点与终点

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(50, 20);
      ctx.quadraticCurveTo(230, 30, 50, 100);
      ctx.stroke();

      ctx.fillStyle = 'blue';
      // 起点
      ctx.fillRect(50, 20, 10, 10);
      // 终点
      ctx.fillRect(50, 100, 10, 10);
      // 控制点
      ctx.fillStyle = 'red';
      ctx.fillRect(230, 30, 10, 10);

在这里插入图片描述

bazierCurveTo

三次贝塞尔曲线
bazierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)
两个控制点一个终点

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(50, 20);
      ctx.quadraticCurveTo(230, 50, 150, 60, 50, 100);
      ctx.stroke();

在这里插入图片描述

translate

坐标轴变换

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.translate(50, 50);
      ctx.fillRect(0, 0, 10, 10);

在这里插入图片描述

restore

恢复到最近一次保存的情况

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.save(); //保存之前的状态
      ctx.translate(50, 50);
      ctx.fillRect(0, 0, 10, 10);
      ctx.restore(); //还原上次保存的状态
      ctx.fillStyle = 'orange';
      ctx.fillRect(0, 0, 10, 10);

在这里插入图片描述

scale

缩放因子
x轴整体缩放

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.scale(2, 1);
      ctx.fillRect(50, 0, 50, 50);

在这里插入图片描述

totate

旋转

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.fillRect(20, 20, 50, 50);
      ctx.rotate((Math.PI / 180) * 10);
      ctx.fillStyle = 'red';
      ctx.fillRect(20, 20, 50, 50);

在这里插入图片描述

transform

水平缩放垂直倾斜水平倾斜垂直缩放水平移动垂直移动

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.transform(1, 1, 0, 1, 0, 0);
      ctx.fillRect(0, 0, 50, 50);

在这里插入图片描述

setTransform

忽略transalte的变换

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.translate(50, 50);
      ctx.setTransform(1, 1, 0, 1, 0, 0);
      ctx.fillRect(0, 0, 50, 50);

在这里插入图片描述