canvas的基础使用

canvas是HTML5元素，作为图形容器，通过使用脚本（通常是Javascript来完成）来完成图形的绘制；
canvas默认没有边框和内容，在网页中就是一个矩形框；

下面是canvas的简单案例：

  
<canvas id="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>

这里的width和height是定义canvas画布在网页中的大小，边框通过style="border: 1px solid #f50;"来指定；其中还要指定一个id供脚本使用；

由于canvas本身没有绘制能力，所有的绘制工作都要交由javascript内部完成：

<!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="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>
    
  </canvas>
  <script>
    var c = document.getElementById('myCanvas');//找到canvas元素
    var ctx = c.getContext('2d');//创建context对象
    ctx.fillStyle = "#f50";//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
    ctx.fillRect(0, 0, 150, 75);//描绘矩形, fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
  </script>
</body>
</html>

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2、canvas画路径：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
stroke()绘制线条

<!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="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>
    
  </canvas>
  <script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = "#f50";
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 500);
    ctx.stroke();
  </script>
</body>
</html>

3、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="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>
    
  </canvas>
  <script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = "#f50";
    ctx.fillRect(0, 0, 150, 75);
    ctx.beginPath();
    ctx.arc(100, 100, 40, 0, 2*Math.PI);
    ctx.fill();//填充了颜色的圆
    // ctx.stroke(); //没有任何填充的圆
  </script>
</body>
</html>

4、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="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>
    
  </canvas>
  <script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = "#f50";

    canvas绘制文本
    ctx.font = "30px Arial";
    ctx.strokeText('Hello World', 10, 50);
  </script>
</body>
</html>

5、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="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>
    
  </canvas>
  <script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = "#f50";
    //径向渐变
    var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");

    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
  </script>
</body>
</html>

线性渐变：

<!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="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>
    
  </canvas>
  <script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = "#f50";
    //canvas--线性渐变
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
  </script>
</body>
</html>

canvas--图像：将一张图片放到画布上：

drawImage(image,x,y)

<!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>
    <img style="display: none;" id="scream" src="ten7.png" alt="" width="200" height="200">
  <canvas id="myCanvas" width="910" height="766" style="border: 1px solid #f50;"></canvas>
    
  </canvas>
  <script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = "#f50";

    //在画布上使用图像
    var img = document.getElementById('scream');
    img.onload = function() {
    ctx.drawImage(img, 10, 10);
     }
  </script>
</body>
</html>

猜你喜欢