canvas画布绘制矩形、圆形、三角形、图像、渐变、视频等的方法

最新推荐文章于 2023-11-25 00:15:00 发布

Venus熊

最新推荐文章于 2023-11-25 00:15:00 发布

阅读量1.2k

点赞数 2

分类专栏： JavaScript 前端文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_47081253/article/details/120327542

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

canvas是html5中一个绘制图形的容器，用javascript来进行绘制。它又称为画布，可以绘制路径、矩形、圆形、图像等。

绘制矩形

在body里添加一个canvas标签，可以设置宽高等属性，如果不设置就是默认值width：300px，height：150px，下面我是设置了宽高300。
用javascript开始绘制，找到需要绘制的canvas节点，然后创建一个新对象
用对象调用fillRect方法绘制矩形，前两个参数为绘制起始位置x坐标和y坐标，后两个参数为矩形宽高

fillStyle设置颜色，只要CSS可以用的标准色都可以使用，如果不设置就是默认黑色；

<body>
    <canvas width="300px" height="300px"></canvas>
</body>
<script>
	//找到canvas节点
    var canvas = document.getElementsByTagName('canvas')[0];
    //创建can对象
    var can = canvas.getContext('2d');
    // 给矩形填充蓝色
    can.fillStyle = 'blue';
    //画出矩形 默认黑色
    can.fillRect(0,0,200,200);
</script>

在这里插入图片描述

绘制圆形

前两步和矩形绘制一样，第三步调用的是arc方法并设置圆的属性，然后用stroke方法进行绘制。
方法：
stroke()：通过线条绘制图形轮廓
arc(x,y,r,sAngle,eAngle,counterclockwise)：设置圆的属性
x，y：圆心坐标
sAngle,eAngle：起始角（时钟三点方向）和结束角，以弧度表示
counterclockwise：可选，规定逆时针false还是顺时针true绘制，默认顺时针

<body>
    <canvas width="300px" height="300px"></canvas>
</body>
<script>
	//找到canvas节点
    var canvas = document.getElementsByTagName('canvas')[0];
    //创建can对象
    var can = canvas.getContext('2d');
    //设置圆的属性
    can.arc(100,100,50,0,2*Math.PI);
    can.stroke();
</script>

在这里插入图片描述

线性渐变和径向渐变

线性渐变：

前两步同矩形一样
创建一个线性渐变对象createLinearGradient(0,0,400,400)，前两个参数是渐变起点，后两个参数是渐变终点
给渐变对象添加渐变色，值为0-1之间，必须有开始和结束位置
将渐变对象给到填充样式fillStyle并调用方法绘制

// 创建一个线性渐变对象
var g = context.createLinearGradient(0,0,400,400);
// 渐变对象添加渐变色 0-1
g.addColorStop(0,'red');
g.addColorStop(0.5,'yellow');
g.addColorStop(1,'cyan');
// 将渐变对象给到填充样式
can.fillStyle = g;
// 绘制线性渐变矩形
can.fillRect(0,0,400,400);

在这里插入图片描述
径向渐变：

前两步同矩形一样
创建一个线性渐变对象createRadialGradient(200,200,50,200,200,200)，前两个参数是小圆圆心，第三个是小圆半径，第四五个是大圆圆心，第六个是大圆半径
给渐变对象添加渐变色，值为0-1之间
将渐变对象给到填充样式fillStyle并调用方法绘制

// 创建一个线性渐变对象
var g = context.createRadialGradient(200,200,50,200,200,200);
// 渐变对象添加渐变色 0-1
g.addColorStop(0,'red');
g.addColorStop(0.25,'pink');
g.addColorStop(0.5,'yellow');
g.addColorStop(0.75,'blue');
g.addColorStop(1,'cyan');
// 将渐变对象给到填充样式
can.fillStyle = g;
// 绘制线性渐变矩形
can.fillRect(0,0,400,400);

在这里插入图片描述

线段的绘制

一般线段不会单独使用，都会用来绘制图案，例如绘制一个三角形，前两步和矩形一样，后面的绘制步骤以及用法都在一下代码有介绍

//新建绘制路径
can.beginPath();
//绘制的起点
can.moveTo(0,0)
//绘制的终点，多条线段时，以上一条线段的终点为下一条线段的起点
can.lineTo(100,100)
can.lineTo(200,0)
//闭合路径
can.closePath();
//开始绘制
can.stroke();

在这里插入图片描述

绘制图像和绘制视频

绘制图像：

前两步与矩形的绘制一样
创建一个image对象，然后设置放图片的路径
设置img对象函数，调用drawImage方法（img对象，起始位置x，起始位置y，结束位置x，结束位置y）

//创建一个image对象
var img = new Image();
//放图片路径
img.src='./h.jpg';
//绘制图片
img.onload = function(){
     var can.drawImage(img,0,0,200,200);
}

在这里插入图片描述
绘制视频：

获取标签节点
获取上下文
声明一个绘制视频方法draw，用drawImage（video，起始位置x，起始位置y，结束位置x，结束位置y）设置视频属性
用requestAnimationFrame(draw)方法调用，参数是draw方法

<script>
        // 文档加载完毕执行代码
        window.onload = function(){
            //    获取标签
            var canvas = document.querySelector('canvas');
            var video = document.querySelector('video');
            // 获取上下文
            var can = canvas.getContext('2d');
            // 声明一个绘制视频方法
            draw();
            function draw(){
                can.drawImage(video,0,0,200,200);
                requestAnimationFrame(draw);
            }
        }
    </script>
</head>
<body>
    <canvas width="400px" height="400px" style="background-color: #ccc;"></canvas>
    <video src="./1.mp4" width="400px" height="400px" autoplay controls></video>
</body>