当前位置：首页 > news >正文

【canvas】

news 2025/8/4 11:57:55

canvas

一、使用vuepress搭建docs
二、介绍
- 1.H5新增特性
- 2.创建canvas元素
- 3.通过JavaScript来绘制
三、基本使用
- 1.基本使用
- 1.绘制线段和三角形
- 2.绘制矩形
- 3.绘制圆形
- 4.清除画布和绘制文字
四、案例---绘制柱状图

一、使用vuepress搭建docs

在这里插入图片描述

二、介绍

1.H5新增特性

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.创建canvas元素

向 HTML5 页面添加 canvas 元素。
必须规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

3.通过JavaScript来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

JavaScript 使用 id 来寻找 canvas 元素；
然后，使用getContext()获取canvas上下文环境
getContext(“2d”)对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
目前参数只有2d不支持3d

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

三、基本使用

1.基本使用

<body><!-- canvas有默认宽高 300*150--><canvas></canvas>
</body>

在这里插入图片描述

鼠标右键，可以看到浏览器把canvas看成是一张图片

在这里插入图片描述

canvas是标签，可以书写样式

想操作canvas画布：画布当中绘制图形、显示文字、必须通过js完成
canvas的宽高务必通过canvas标签的属性width,height设置。不能通过样式设置。

    <!--  --><!-- <canvas>我是小帅</canvas> --><!-- 书写内容没意义 --><canvas><!-- 添加子节点没意义 --><h1>我是小帅</h1></canvas><canvas width="600" heighr="400">我是小美</canvas> <style>* {margin: 0;padding: 0;}canvas {border: 1px solid #0a0a0a;}</style>

在这里插入图片描述

通过js操作

    //通过js当中的"笔"去完成let canvas = document.querySelector('canvas');//获取canvas的上下文（笔）let ctx = canvas.getContext('2d');console.log(ctx);

在这里插入图片描述

1.绘制线段和三角形

在这里插入图片描述

   //通过js当中的"笔"去完成let canvas = document.querySelector('canvas');//获取canvas的上下文（笔）let ctx = canvas.getContext('2d');console.log(ctx);//绘制线段ctx.moveTo(10, 10);//起点ctx.lineTo(100, 100);//其他点ctx.stroke();//画

在这里插入图片描述

   //通过js当中的"笔"去完成let canvas = document.querySelector('canvas');//获取canvas的上下文（笔）let ctx = canvas.getContext('2d');console.log(ctx);//绘制线段ctx.moveTo(10, 10);//起点ctx.lineTo(100, 100);//其他点ctx.lineTo(10, 100);//其他点ctx.closePath();//连接起点终点ctx.stroke();//画

在这里插入图片描述

看到的三角形不是一个DOM节点
只有一个节点，那就是canvas标签
眼睛看到的实际是由像素点组成的像素群

在这里插入图片描述

2.绘制矩形

    let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');ctx.strokeRect(100, 200, 100, 200);//（距离左边的距离，距离顶部的距离，矩形的宽度，矩形的高度）// 绘制矩形第一种方法//  （距离左边的距离，距离顶部的距离，矩形的宽度，矩形的高度）// 绘制矩形第二种方法,带填充颜色，默认黑色，可以替换ctx.fillStyle = 'skyblue';ctx.fillRect(300, 200, 100, 200);ctx.fill();//填充的颜色务必放在绘制图形之前，否则不会填充

在这里插入图片描述

3.绘制圆形

    let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');//arc(x,y,r,start,stop,anticlockwise)//x,y为圆心坐标，r为半径，start为起始弧度，stop为终止弧度s,anticlockwise为是否逆时针绘制(true为逆时针)//360° = 2π 弧度（2*PI）//绘制一个圆ctx.beginPath();//开始绘制ctx.arc(100, 100, 50, 0, Math.PI * 2, true);ctx.stroke();//描边

在这里插入图片描述

4.清除画布和绘制文字

    let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');// 绘制一个矩形ctx.fillStyle = 'skyblue';ctx.fillRect(100, 200, 100, 200);// 清除画布 -整个画布// ctx.clearRect(0, 0, canvas.width, canvas.height);// 清除画布 -指定区域ctx.clearRect(100, 200, 50, 100);//绘制文字ctx.font = '20px 微软雅黑';ctx.fillStyle = 'black';ctx.fillText('数据可视化', 50, 20);

在这里插入图片描述

四、案例—绘制柱状图

在这里插入图片描述

    let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');ctx.font = '16px 微软雅黑';ctx.fillText('数据可视化', 50, 20);//绘制线段ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.lineTo(700, 400);ctx.stroke();//绘制其他的线段ctx.moveTo(100, 100);ctx.lineTo(700, 100);ctx.fillText('150', 70, 110);ctx.moveTo(100, 160);ctx.lineTo(700, 160);ctx.fillText('120', 70, 170);ctx.moveTo(100, 220);ctx.lineTo(700, 220);ctx.fillText('90', 70, 230);ctx.moveTo(100, 280);ctx.lineTo(700, 280);ctx.fillText('60', 70, 290);ctx.moveTo(100, 340);ctx.lineTo(700, 340);ctx.fillText('30', 70, 350);ctx.fillText('0', 70, 400);ctx.stroke();//绘制水平轴底部线段ctx.moveTo(250, 400);ctx.lineTo(250, 410);//底部文字ctx.fillText('食品', 170, 415);ctx.moveTo(400, 400);ctx.lineTo(400, 410);//底部文字ctx.fillText('数码', 320, 415);ctx.moveTo(550, 400);ctx.lineTo(550, 410);//底部文字ctx.fillText('服饰', 450, 415);//底部文字ctx.fillText('箱包', 600, 415);ctx.stroke();//绘制矩形ctx.fillStyle = 'skyblue';ctx.fillRect(120, 200, 110, 200);