Canvas基本使用

发表于 | 分类于 ， ，

Canvas简介

canvas是html5中新增的、结构层中的一个双闭合标签。我们可在行为层中操作画布，可以在canvas中绘制一些简单图形、对于图片进行裁切、可以实现一些简单2D动画、显示视频。

Canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>canvas</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid black;
        }
    </style>

</head>
<body>
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    // 获取canvas标签
    var canvas = document.querySelector("canvas");
    // 画布中任何操作必须通过2D上下文进行操作[画笔]
    var ctx = canvas.getContext("2d");
    console.log(ctx);
    // 一定注意，画布中任何操作都是通过ctx的属性或者方法进行操作
    // 绘制矩形
    ctx.fillStyle= "skyblue";
    ctx.fillRect(100,200,100,100);

//绘制圆
//通过绘制路径形式绘制圆
ctx.beginPath();
// x,y,半径,从0~2pi,顺时针
ctx.arc(200,300,50,0,Math.PI*2,true);
ctx.fillStyle = "red";
// 开始填充
ctx.fill();
// 边框设置
ctx.lineWidth = 20;
ctx.strokeStyle = "pink";
// 开始绘制
ctx.stroke();
</script>

在这里插入图片描述

  • 浏览器认为canvas是一张图片
  • canvas标签有默认宽（300）和高（150），不用加px单位
  • canvas宽和高不要写样式，会变形。务必要用属性进行设置
  • canvas标签文本、子标签都没有任何意义，必须要用ctx画笔进行操作
  • canvas最基本的功能是绘图，需要注意画布任何操作都是通过2d上下文进行渲染

任何标签都有id和name属性

three.js 函数库
炫酷的3d效果，底层是WebJL实现的,，是webGL中一个实用函数库