1-认识canvas

红色石头本尊
83 阅读1分钟

兼容性

IE9以后才支持canvas,其它的兼容性还好

基本的使用

  • canvas身上的属性 width/height
<!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>
</head>
<body>
  <canvas width="300" height="150"></canvas>
</body>
</html>

画矩形

  • 画矩形 三种情况 填充满的矩形/只有轮廓的矩形/透明矩形
    1. 填充矩形
  • fillRect
<!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>
    #canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    //2d类型的上下文 webgl就是3d 接口就是 WebGLRenderingContext
    /*
      canvas grid(画布栅格) 概念 
(0, 0)----------------> X
      |
      |
     \|
      y

    原点: (0, 0) -> 坐标的概念
    canvas只支持一种原生图形的绘制 -> 矩形
    其它的图像都是线段组合出来的
    */ 

    // 案例1: 画矩形 三种情况 填充满的矩形/只有轮廓的矩形/透明矩形 
    // 1.橙色矩形
    // 2. 定义画笔颜色
    ctx.fillStyle = "orange";
    /*
      fillRect的四个参数:
      x: 落笔的横坐标
      y: 落笔的纵坐标
      width: 宽
      height: 高
    */ 
    //填充
    ctx.fillRect(50, 50, 100, 100);
  </script>
</body>
</html>

image.png

  • 2. 在上面的基础上画出镂空的矩形
  • clearRect
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    ctx.fillStyle = "orange"
    //填充
    ctx.fillRect(50, 50, 100, 100);

    /*
      清除指定的区域并且让它完全透明 -> 镂空的效果
      清除 clearRect
      x: 落笔的横坐标
      y: 落笔的纵坐标
      width: 宽
      height: 高
    */
    ctx.clearRect(75, 75, 50, 50);
  </script>

image.png

  • 带轮廓的矩形
  • strokeRect
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    // 带轮廓的矩形
    ctx.strokeRect(50, 50, 100, 100)
  </script>

image.png

  • 轮廓换颜色
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    // 轮廓换色
    ctx.strokeStyle = "orange"
    // 带轮廓的矩形
    ctx.strokeRect(50, 50, 100, 100)
  </script>

image.png

画线

<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    // 1.创建新路径
    ctx.beginPath();
    // 2.使用画图命令画出路径
    ctx.strokeStyle = "orange";//设置画笔颜色
    ctx.moveTo(50, 50);//画笔落笔位置(起始点)
    ctx.lineWidth = 5;//调整线的宽度
    ctx.lineTo(100, 100);//执行到哪个点(终止点)
    // 3.一旦路径被画出来了的话,就可以通过描边或者填充路径区域来渲染图形
    ctx.stroke();
  </script>

image.png

画三角形

  • 画2条线,然后闭合路径
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    // 1.创建路径
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.moveTo(50, 50);
    ctx.lineWidth = 5;
    ctx.lineTo(150, 50);
    // 在这个点的基础上,画到另一个点
    ctx.lineTo(100, 100);
    // 闭合路径 api
    ctx.closePath();
    ctx.stroke();
  </script>

image.png

画圆弧

<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    // arc(x, y, radius半径, startAngle起始角度, endAngle终止角度, 顺逆时针画默认false)默认顺时针
    ctx.beginPath();
    // 找圆心坐标 Math.PI是Π 360°整圆
    ctx.arc(70, 70, 50, 0, 2 * Math.PI);
    // 64°的圆弧
    // ctx.arc(70, 70, 50, 0, 64/180 * Math.PI)
    ctx.stroke();
  </script>

image.png

组合画法

<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
        ctx.beginPath();
    ctx.moveTo(150, 20);
    ctx.arcTo(150, 100, 50, 20, 30);// x1 y1 x2 y2 radius半径做切线的圆弧
    ctx.lineTo(50, 20);
    ctx.stroke();

    ctx.fillStyle = "blue";
    // 基础点
    ctx.fillRect(150, 20, 10, 10);

    
    ctx.fillStyle = "red";
    // 控制点1
    ctx.fillRect(150, 100, 10, 10);
    // 控制点2
    ctx.fillRect(50, 20, 10, 10);
  </script>

image.png

2次/3次贝塞尔曲线

  • 1962法国的一个叫贝塞尔提出来的
// => 二次贝塞尔 经典案例 旋转木马
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    ctx.beginPath();
    ctx.moveTo(50, 20);
    // cpx控制点x cpy控制点y x y 终点坐标
    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);
  </script>

image.png

  • 3次贝塞尔
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    ctx.beginPath();
    ctx.moveTo(50, 20);
    ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
    ctx.stroke();
    ctx.fillStyle = "blue";
    // 起始点
    ctx.fillRect(50, 20, 10, 10);
    // 终点
    ctx.fillRect(50, 100, 10, 10);

    ctx.fillStyle = "red";
    // 控制点1
    ctx.fillRect(230, 30, 10, 10);
    // 控制点2
    ctx.fillRect(150, 60, 10, 10);
  </script>

image.png

坐标轴的变换

  • translate: 移动坐标原点
    • 往x水平移动,往y方向垂直移动
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    // 原点坐标进行平移 (0,0) -> (50, 50)
    ctx.translate(50, 50);
    ctx.fillRect(0, 0, 30, 30);
  </script>

image.png

  • 记录状态 和 重置
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    ctx.save();
    
    // 原点坐标(0,0)
    ctx.fillRect(0, 0, 30, 30);

    // 原点坐标进行平移 (0,0) -> (50, 50)
    ctx.translate(50, 50);
    ctx.fillRect(0, 0, 30, 30);

    // 还原到上次(最近)保存的状态
    ctx.restore();
    ctx.fillStyle = "orange";
    ctx.fillRect(100, 0, 30, 30);
  </script>

image.png

变形 scale(w倍数, h倍数)

  • 可以看作画布的单元格子变大了,就可以清除知道画的东西的位置了
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    ctx.scale(2, 1);
    ctx.fillRect(50, 0, 30, 30);  
  </script>

image.png

旋转 rotate

  • 旋转按照原定旋转的
<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    ctx.fillRect(20, 20, 50, 50);
    ctx.rotate(Math.PI / 180 * 10);//转10°
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 50, 50);
  </script>

image.png

变形transform

<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
/*
      6个参数:
      水平缩放
      垂直倾斜
      水平倾斜
      垂直缩放
      水平移动
      垂直移动
    */
    ctx.transform(1, 1, 0, 1, 0, 0);
    ctx.fillRect(0, 0, 50, 50);
 </script>

image.png

setTransform重置为变形前的状态

<canvas id="canvas" width="300" height="150"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取渲染上下文 getContext
    var ctx = canvas.getContext("2d");//也可以称之为画笔
    
    ctx.translate(50, 50);
    ctx.setTransform(1, 1, 0, 1, 0, 0);//上面的translate失效了
    ctx.fillRect(0, 0, 50, 50);
 </script>

image.png

avatar
文章
阅读
粉丝