HTML5 学习笔记（六）--- canvas 画布

已于 2022-09-11 17:03:42 修改
阅读量849 收藏 2
点赞数 3
分类专栏： HTML+CSS基础 文章标签： html5
于 2021-08-03 20:29:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45092437/article/details/119358372
版权

一、概念

​ Canvas 元素时 HTML5 新增的专门用来绘制图形、字符和图像的元素，其本身是一个矩形区域，用户通过 JavaScript 来控制元素中的每一像素来绘制图形。

二、绘制图形

1、基本使用

​ ① 创建 Canvas 元素

​ ② 获取 Canvas 元素

​ ③ 获取上下文 创建 Context 对象

​ ④ 设置图形参数

​ ⑤ 绘制图形

注意： 在绘制各种图形时 出现的坐标参数，都是以创建的 Canvas 元素盒子为基准的，盒子左上角的坐标为 (0,0) 。

2、绘制直线
案例展示：

​ 直线就不展示了。

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas>
<script>
    // 2. 获取 Canvas 元素
    var c = document.getElementById('canvas');
    // 3. 获取上下文 创建 Context 对象
    var cxt = c.getContext('2d');
    // 4. 设置绘制颜色
    cxt.strokeStyle = 'red';
    // 5. 设置起点坐标
    cxt.moveTo(20,80)
    // 6.设置终点坐标
    cxt.lineTo(260,80)
    // 7.开始绘制
    cxt.stroke();
</script>
3、绘制渐变色线条
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style=" margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
  // 2. 获取 Canvas 元素
  var c = document.getElementById('canvas');
  // 3. 获取上下文 创建 Context 对象
  var cxt = c.getContext('2d');
  // 4. 创建线性渐变对象  四个参数为：渐变开始点的 x 坐标、渐变开始点的 y 坐标、渐变结束点的 x 坐标、渐变结束点的 y 坐标
  var gradient = cxt.createLinearGradient(0,0,170,0)
  //  4.1 设置初始颜色
  gradient.addColorStop(0,"blue");
  //  4.2 设置中间颜色
  gradient.addColorStop(0.5,"green");
  //  4.3 设置结尾颜色
  gradient.addColorStop(1,"red");
  //  5. 设置绘制颜色 为 线性渐变对象
  cxt.strokeStyle = gradient;
  // 6. 设置线条的宽度 单位是 px
  cxt.lineWidth = 20;
  // 7. 设置起点坐标
  cxt.moveTo(20,80)
  // 8.设置终点坐标
  cxt.lineTo(260,80)
  // 9.开始绘制
  cxt.stroke();
</script>
4、绘制矩形
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
    // 2. 获取 Canvas 元素
    var c = document.getElementById('canvas');
    // 3. 获取上下文 创建 Context 对象
    var cxt = c.getContext('2d');
    // 4. 绘制图形
    // 4.1 设置矩形填充颜色
    cxt.fillStyle = 'red';
    // 4.2 设置矩形属性  参数分别为：矩形左上角 x 坐标、矩形左上角 y 坐标、矩形宽度、矩形高度
    cxt.fillRect(10,10,100,50);
</script>
5、绘制渐变色矩形
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
    // 2. 获取 Canvas 元素
    var c = document.getElementById('canvas');
    // 3. 获取上下文 创建 Context 对象
    var cxt = c.getContext('2d');
    // 4. 创建线性渐变对象 四个参数为：渐变开始点的 x 坐标、渐变开始点的 y 坐标、渐变结束点的 x 坐标、渐变结束点的 y 坐标
    var gradient = cxt.createLinearGradient(0,0,170,0)
    //  4.1 设置开始颜色
    gradient.addColorStop(0,"blue");
    //  4.2 设置结尾颜色
    gradient.addColorStop(1,"red");
    // 4. 绘制图形
    // 4.1 设置矩形填充颜色为渐变对象
    cxt.fillStyle = gradient;
    // 4.2 设置矩形属性  参数分别为：矩形左上角 x 坐标、矩形左上角 y 坐标、矩形宽度、矩形高度
    cxt.fillRect(10,10,100,50);
</script>
6、绘制圆形和圆弧
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
    // 2. 获取 Canvas 元素
    var c = document.getElementById('canvas');
    // 3. 获取上下文 创建 Context 对象
    var cxt = c.getContext('2d');
    // 4. 绘制一个圆弧路径的开始
    cxt.beginPath();
    // 5. 设置圆弧的属性  参数分别为：圆心的 x 坐标、圆心的 y 坐标、半径、起始角度、结束角度
    // 还有一个可选参数：false/true 代表顺时针还是逆时针绘制
    // 旋转的角度用 Math.PI 表示  一个 Math.PI 相当于 半个圆
    cxt.arc(70,70,50,0,2*Math.PI)
    // 6. 开始绘制
    cxt.stroke();
    // 7. 绘制圆弧结束
    cxt.closePath();
    // 半圆
    // 8. 绘制一个圆弧路径的开始
    cxt.beginPath();
    // 9. 设置圆弧的属性
    cxt.arc(200,70,50,0,1*Math.PI)
    // 10. 开始绘制
    cxt.stroke();
    // 11. 绘制圆弧结束
    cxt.closePath();
</script>

三、绘制文字

1、概念

​ 我们可以通过 fillText 方法来绘制填充文字，也可以通过 strokeText 方法来绘制轮廓文字。可以结合渐变对象使用，生成渐变色的文字。

语法：

​ fillText(text,x,y,[maxWidth])

​ strokeText(text,x,y,[maxWidth])

参数： text — 要绘制的文字、x,y — 起始坐标、maxWidth – 最大宽度

2、填充文字
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
    // 2. 获取 Canvas 元素
    var c = document.getElementById('canvas');
    // 3. 获取上下文 创建 Context 对象
    var cxt = c.getContext('2d');
    // 4. 设置字体颜色
    cxt.fillStyle = 'pink';
    // 5. 字体大小 和 字体类型
    cxt.font = '30px Verdana';
    // 6. 字体属性  参数为：文本内容、起点 x坐标 、起点 y 坐标
    cxt.fillText('菜鸟一只',15,75);

</script>
3、轮廓文字
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
    // 2. 获取 Canvas 元素
    var c = document.getElementById('canvas');
    // 3. 获取上下文 创建 Context 对象
    var cxt = c.getContext('2d');
    // 4. 设置字体颜色
    cxt.fillStyle = 'pink';
    // 5. 字体大小 和 字体类型
    cxt.font = '30px Verdana';
    // 6. 字体属性  参数为：文本内容、起点 x坐标 、起点 y 坐标
    cxt.strokeText('菜鸟一只',15,75);

</script>

四、绘制图像

1、概念

​ 我们可以通过 drawImage 方法在 canvas 画布上绘制图像，共有三种用法：

​ drawImage(img,x,y)：img — 图像、x,y — 绘制图像的起点

​ drawImage(img,x,y,width,height)：width – 图像的宽度、height – 图像的高度

​ drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：sx,sy — 剪切的的起点、width – 剪切的图像宽度、height – 剪切的图像高度

2、绘制图像案例
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
  // 2. 获取 Canvas 元素
  var c = document.getElementById('canvas');
  // 3. 获取上下文 创建 Context 对象
  var cxt = c.getContext('2d');
  // 4. 声明图片对象
  var img = new Image();
  // 5. 图片加载完成后 绘制图像
  img.onload = function () {
      cxt.drawImage(img,50,25,200,100)
  }
  // 6. 设置图片地址
  img.src="../img/dog.jpg"

</script>

五、绘制图形阴影效果

1、概念

​ 我们可以通过 shadowOffsetX(阴影的水平偏移)、shadowOffsetY(阴影的垂直偏移)、shadowBlur(阴影羽化程度)、shadowColor(阴影的颜色) 这四条属性来绘制阴影。

2、阴影案例
案例展示：

在这里插入图片描述

案例代码：
<!--1. 创建 Canvas 元素-->
<canvas id="canvas" width="300" height="150" style="margin: 100px 800px;border: 1px solid #d3d3d3"></canvas>
<script>
    // 2. 获取 Canvas 元素
    var c = document.getElementById('canvas');
    // 3. 获取上下文 创建 Context 对象
    var cxt = c.getContext('2d');
    // 4. 设置阴影属性
    cxt.shadowOffsetX = 10;
    cxt.shadowOffsetY = 10;
    cxt.shadowBlur = 30;
    cxt.shadowColor = 'black';
    // 5. 绘制图形
    // 5.1 设置矩形填充颜色
    cxt.fillStyle = 'red';
    // 5.2 设置矩形属性  参数分别为：矩形左上角 x 坐标、矩形左上角 y 坐标、矩形宽度、矩形高度
    cxt.fillRect(10,10,100,50);
</script>

六、多个canvas元素渲染后存在间距的问题

1、简介

最近在实际工作中用到了canvas元素，需要在一个模块内连续渲染多个canvas元素，但是出现了一种奇怪的情况，就是两个canvas元素之间会出现一个莫名其妙的间距，仔细排查后，确定没有给元素增加padding和margin，但间距确实存在，影响页面效果和功能实现。

2、案例场景
 <canvas id="canvas" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas>
  <canvas id="canvas2" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas>
  <script>
    // 2. 获取 Canvas 元素
    var c1 = document.getElementById('canvas');
    var c2 = document.getElementById('canvas2');
    // 3. 获取上下文 创建 Context 对象
    var cxt1 = c1.getContext('2d');
    var cxt2 = c2.getContext('2d');
    // 4. 绘制图形
    // 4.1 设置矩形填充颜色
    cxt1.fillStyle = 'red';
    cxt2.fillStyle = 'green';
    // 4.2 设置矩形属性  参数分别为：矩形左上角 x 坐标、矩形左上角 y 坐标、矩形宽度、矩形高度
    cxt1.fillRect(10,10,100,50);
    cxt2.fillRect(10,10,100,50);
</script>
页面展示：

在这里插入图片描述

3、问题分析

从上面的页面图片我们可以很明显的看出两个canvas元素之间存在间隙，而且我们并没有给他们设置间距。经过实验和查阅资料，最终找出了原因，竟然是因为回车换行的原因，两个canvas元素分别位于两行，中间存在着一个回车换行，在正常情况下没有任何问题，但是在两个canvas元素之间，就出现一个空格占位符，导致两个元素出线间隔。这简直是。。。。

4、解决方案
① 将canvas元素放到一行上

从根源上消除了因回车产生的空格占位符。

 <canvas id="canvas" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas><canvas id="canvas2" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas>
  <script>
    // 2. 获取 Canvas 元素
    var c1 = document.getElementById('canvas');
    var c2 = document.getElementById('canvas2');
    // 3. 获取上下文 创建 Context 对象
    var cxt1 = c1.getContext('2d');
    var cxt2 = c2.getContext('2d');
    // 4. 绘制图形
    // 4.1 设置矩形填充颜色
    cxt1.fillStyle = 'red';
    cxt2.fillStyle = 'green';
    // 4.2 设置矩形属性  参数分别为：矩形左上角 x 坐标、矩形左上角 y 坐标、矩形宽度、矩形高度
    cxt1.fillRect(10,10,100,50);
    cxt2.fillRect(10,10,100,50);
</script>

页面效果：

在这里插入图片描述

② 给所有canvas元素设置float或flex等样式属性

通过设置样式，使元素之间紧密相接，从而消除空格占位符的影响。

  <style>
    canvas {
      float: left;
    }
  </style>
  <canvas id="canvas" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas>
  <canvas id="canvas2" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas>
  <script>
    // 获取 Canvas 元素
    var c1 = document.getElementById('canvas');
    var c2 = document.getElementById('canvas2');
    // 获取上下文 创建 Context 对象
    var cxt1 = c1.getContext('2d');
    var cxt2 = c2.getContext('2d');
    // 绘制图形
    // 设置矩形填充颜色
    cxt1.fillStyle = 'red';
    cxt2.fillStyle = 'green';
    // 设置矩形属性  参数分别为：矩形左上角 x 坐标、矩形左上角 y 坐标、矩形宽度、矩形高度
    cxt1.fillRect(10,10,100,50);
    cxt2.fillRect(10,10,100,50);
</script>
页面效果：

在这里插入图片描述

努力的小朱同学
关注
专栏目录
HTML5 Canvas（画布）
shou_ren_bai_bu的博客
08-03 349
简单来说，是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。MDN是一个可以使用脚本 (通常为JavaScript) 来绘制图形的HTML元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。
canvas画布
m0_62073591的博客
07-15 2281
在canvas中绘制圆形,我们将使用以下方法arc(x,y,r,start,stop,[counterclockwise])参数的意思(圆心x，圆心y,半径r，起始角，结束角,[弧沿着圆周的逆时针(True)或者顺时针(False)遍历])绘制一个圆。参数的意思(椭圆圆心x，椭圆圆心y,半径x,半径y,旋转的角度，起始角，结束角，顺时针还是逆时针）知识点5清空给定矩形内的指定像素context.clearRect(x,y,width,height);定义和用法方法绘制矩形(无填充)。...
玩转html5<canvas>画图
weixin_30827565的博客
08-06 1166
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变（发散） 图形变形（平移、旋转、缩放） 矩阵变换（图形变形的机制） 图形组合 给图形绘制阴影 绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]） 绘制文字 保存和恢复状态（context） 保存文件 结合setInterval制...
HTML5中canvas绘图基础详解
最新发布
业精于勤荒于嬉，行成于思毁于随
09-08 1779
H5中新增了重要元素canvas,通过绘制任意图形，借助自带API，通过编写js可以控制各种图形，制作动画效果，对web具有划时代意义。
canvas画布的基本教程
JYYQXRM的博客
09-15 3424
<canvas></canvas> 属于html元素，H5新增元素，需要结合js，用来绘制图形 在页面上放置一个canvas元素，就相当于放置了一块画布 可以绘制路径，矩形，圆形，字符，图像… 属性： width 默认值300px height 默认值150px 一般不建议使用css设置它的宽高 基本方法： <canvas id="canvas" width="300" height="300"></canvas> <script>//js部分
HTML5 Canvas
weixin_34343308的博客
08-24 172
HTML5 Canvas Canvas ，HTML 5中引入它，可以做很多事情：画图、动画、游戏开发等等。本篇就主要讲解一下Canvas的基本作图。  内容摘要  1、Canvas 基础知识 1.1 Canvas元素 1.2 CanvasRenderingContext2D简介  2、Canvas 基本作图 2.1 线条 2.1.1 直线 （Line） 2...
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
09-28
本文的学习笔记重点讲述了`canvas`元素的画板尺寸与实际显示尺寸之间的关系。 首先，我们要了解`canvas`元素的尺寸是由其`width`和`height`属性直接指定的。这些属性定义了画布的像素尺寸，也就是画布的内部分辨率...
【学习笔记】H5-canvas
m0_54970415的博客
05-30 459
文章目录一、canvas标签使用方法二、准备画笔三、能画什么？1. 矩形a.实心矩形b.空心矩形c.透明矩形（异形矩形、清空）2. 路径 (万能方法，可以画任意的形状)<1> 直线<2> 三角形<3> 路径矩形<4> 圆或圆弧四、描边、填充、边框粗细等（上色）1. 填充颜色2. 描边颜色3. 边框粗细4. 描边(只对路径有用)5. 填充(只对路径有用) 一、canvas标签使用方法 canvas是一个双标签，默认width300，height150。设置画布大
canvas学习笔记之2d画布基础的实现
01-21
< canvas> 元素创造了一个固定大小的画布，其上的渲染上下文CanvasRenderContext2D，可以用来绘制和处理要展示的内容。 若要在canvas上绘图，首先得获取CanvasRenderContext2D2d渲染上下文。（此处指2d的，
H5--canvas--笔记-画笔-直线-矩形-圆-圆弧
看开了
07-24 871
canvas学习笔记 1.获取画笔 通过DOM操作获取canvas元素节点之后(变量名为canvas); let ctx = canvas.getContext(“2d”); 就可以获取canvas的画笔了; 2.画笔的样式 对画笔的操作,也就是调用画笔对象的方法,所以以ctx.开头,方法名是小驼峰 画笔的宽度 ctx.lineWidth=“4”; 画笔的颜色 画笔的颜色因为画法的不同,分为两种...
android学习笔记--clip.pdf
11-25
Canvas 是一个虚拟的画布，对于 Canvas 的操作可以影响到画图的结果。因此，在 Android 中 Clip 剪切机制是对 Canvas 上的 Region 进行剪切的，而不是对已经存在的图形进行剪切的。 Android 提供了多种剪切区域的 ...
（转）学习 HTML5 Canvas 这一篇文章就够了
02-27 955
学习 HTML5 Canvas 这一篇文章就够了 一、canvas 简介 ​<canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firef...
画布 Canvas
影子
06-10 455
Android Framework 提供了一些2D 画图的 API，android.graphics 包就是其中之一。 为了画一些东西，需要4个元素（或称组件）协同来完成： 位图：Bitmap 来保持（hold）那些像素 画布：Canvas 来响应画画（draw）的调用（并将其写入 bitmap） 画笔：paint 描述画画的颜色和样式等 “颜料“：drawing...
HTML5 canvas 详细
web_hxx的博客
07-10 1379
HTML5画布描述 HTML5<canvas>标签用于通过脚本（通常是JavaScript）动态绘制图形。 但是，<canvas>元素没有自己的绘图功能（它只是图形的容器）， 您必须使用脚本来实际绘制图形。 getContext()方法返回一个对象，该对象提供在画布上绘制的方法和属性。此参考将介绍getContext("2d")对象的属性和方法，可用于在画布上绘制文本，...
HTML canvas画布
LygTom的博客
08-23 546
给大家介绍一种有意思的画布，那就是h5的画布canvas （1）canvas元素 width、height 和style 里面的width、height一样么？ 如果直接设置canvas的width和height ：画布和元素的宽度都是你设置的值。 如果设置的Style里面的width和height，它仅表示canvas元素占文档流的位置。这时候画布的宽度和高度是默认值。分别是600、30
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力的小朱同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值