Canvas学习笔记一 - 图形的绘制

最新推荐文章于 2024-04-08 19:19:50 发布
最新推荐文章于 2024-04-08 19:19:50 发布
阅读量203 收藏 1
点赞数 1
分类专栏： # Canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44808483/article/details/114918597
版权

一、替换内容

<!-- 当前浏览器如果不支持 canvas 标签时，会打印 canvas 内部的html标签 -->
<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

在这里插入图片描述
（左图：IE8，右图：谷歌 89.0.0）

二、渲染上下文

  • getContext()，只有一个参数，上下文的格式‘2d’
  • CanvasRenderingContext2D，2D图像处理

三、检查支持性

if (canvas.getContext) {
	var ctx = canvas.getContext('2d');
}

模板骨架

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas学习笔记</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body onload="draw()">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
  <script>
    function draw() {
      var canvas = document.getElementById('canvas');

      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        // 代码编写
      }
    }
  </script>
</html>

四、属性与方法

1. 绘制矩形

属性、方法说明
fillRect(x, y, width, height)绘制一个填充的矩形
strokeRect(x, y, width, height)绘制一个矩形的边框
clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。
rect(x, y, width, height)绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。(画完之后是空白的，没有边框显示，需要配合 stroke() 使用)
draw = () => {
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(35, 35, 40, 40)
    ctx.strokeRect(45, 45, 20, 20);
    ctx.clearRect(75, 75, 40, 40);
    ctx.strokeRect(85, 85, 20, 20);
  }
};

2. 绘制路径

  1. 首先，你需要创建路径起始点。
  2. 然后你使用画图命令去画出路径。
  3. 之后你把路径封闭。
  4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

方法说明
beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()通过线条来绘制图形轮廓。
fill()通过填充路径的内容区域生成实心的图形。
// 绘制一个三角形
draw = () => {
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(25, 100);
    ctx.lineTo(125, 100);
    ctx.fill( )
  }
};

3. 移动笔触

一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

方法说明
moveTo(x, y)将笔触移动到指定的坐标x以及y上。
// 画一个笑脸
draw = () => {
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
    ctx.moveTo(115, 75);
    ctx.arc(75, 75, 40, 0, Math.PI, false);
    ctx.moveTo(70, 60)
    ctx.arc(60, 60, 10, 0, Math.PI * 2, true);
    ctx.moveTo(100, 60)
    ctx.arc(90, 60, 10, 0, Math.PI * 2, true);

    ctx.stroke();
  }
};

效果图如下：前者没有使用moverTo属性，后者则是使用了。
在这里插入图片描述

4. 线

方法说明
lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线。
draw = () => {
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    // 填充三角形
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(25, 75);
    ctx.lineTo(60, 50);
    ctx.fill(); // 填充图形，可以直接使用fill方法，路径会自动闭合。

	// 描边三角形
    ctx.beginPath();
    ctx.moveTo(100, 80);
    ctx.lineTo(100, 130);
    ctx.lineTo(50, 105);
    ctx.closePath(); // 描边图形，需要手动闭合路径，否则边框会缺失。
    ctx.stroke();
  }
};

5. 圆

方法说明
arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

这里详细介绍一下arc方法，该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度=(Math.PI/180)*角度。1弧度约等于57度。

draw = () => {
  let canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    for (var i = 0; i < 4; i++) {
      for (var j = 0; j < 3; j++) {
        ctx.beginPath();
        var x = 25 + j * 50; // x 坐标值
        var y = 25 + i * 50; // y 坐标值
        var radius = 20; // 圆弧半径
        var startAngle = 0; // 开始点
        var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
        var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
};

6. 二次贝塞尔曲线及三次贝塞尔曲线

方法说明
quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

二次贝塞尔曲线及三次贝塞尔曲线的关系：二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），而三次贝塞尔曲线有两个控制点。
在这里插入图片描述

// 聊天气泡 二次贝塞尔曲线
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
   }
}

// 填充心形 三次贝塞尔曲线
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fill();
  }
}

五、Path2D 对象

正如我们在前面例子中看到的，你可以使用一系列的路径和绘画命令来把对象“画”在画布上。为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

方法说明
Path2D.addPath(path [, transform])​添加了一条路径到当前路径（可能添加了一个变换矩阵）。
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

使用 SVG paths

新的Path2D API有另一个强大的特点，就是使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

这条路径将先移动到点 (M10 10) 然后再水平移动80个单位(h 80)，然后下移80个单位 (v 80)，接着左移80个单位 (h -80)，再回到起点处 (z)。你可以在Path2D constructor 查看这个例子。

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
俊小赞
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5画布(canvas)绘制图形
m0_61843988的博客
07-15 4471
canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域，默认大小300*150 注意：canvas画布默认背景色为透明色，可以自行定义背景色...
学习笔记——使用canvas给图形填色
layuecr的博客
09-19 4224
看到canvas的章节，想到可以用它来画个图。然后选了幅由简单线条组成的卡通火箭图，准备动手画。画的过程中遇到了些问题，这里整理一下。下面是找来的图：         没上色前，还感觉不出什么问题。就是使用lineTo画直线，quadraticCurveTo画曲线。附个没上色的图：         到上色了，就遇到问题了：一个颜色怎么覆盖到另外一个颜色上面去？
HTML5绘制体温单图例
09-09
前端根据数据配置进行绘制体温单，涉及到角度、弧度等算法
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 9517
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
HTML Canvas 详解，超全！！！
m0_72410588的博客
07-26 3715
HTML Canvas是HTML5新增的一个元素，它提供了一个可执行JavaScript脚本绘制图形的区域。Canvas元素通过使用JavaScript API，可以在浏览器上绘制图形、渲染动画和实现交互效果等。灵活性：Canvas提供了丰富的绘图API，可以绘制任意形状、大小和颜色的图形，适应各种需求。高性能：由于Canvas是直接操作像素的，相比其他图形技术（如SVG），Canvas在性能方面更占优势，尤其在处理大量图形和动画时表现出色。跨平台。
Canvas学习记录
小康博客
09-14 432
Canvas的基本用法 canvas元素 <canvas id="tutorial" width="150" height="150"></canvas> canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。 该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
canvas学习笔记之绘制线条
--lifeng的博客
01-23 131
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
canvas学习笔记之绘制简单路径
09-22
在HTML5中，Canvas元素提供了一个强大的2D绘图环境，允许开发者动态地在网页上绘制图形。本篇文章将深入探讨Canvas的绘制简单路径，包括线段、矩形和圆弧路径的创建方法。 首先，我们来看线段（直线路径）的绘制。...
android学习笔记--clip参照.pdf
12-08
在 Android 开发中，Clip 是一个很重要的概念，它可以控制 Canvas 的绘制区域，限制绘制的图形在某个特定的区域内。然而，初次接触到 Android 的 Clip 很容易产生疑问，例如 Clip 的时机、Clip 中的 Op 参数的意思等...
canvas学习之API整理笔记（一）
08-31
在本篇“canvas学习之API整理笔记（一）”中，我们主要关注的是Canvas的基本API，包括如何获取Canvas元素、创建画布以及如何在Canvas上绘制基本图形。 首先，要在HTML中使用Canvas，需要在页面中添加一个`<canvas>`...
canvas学习之API整理笔记（二）
11-29
3. 大量图形绘制时，考虑使用`Path2D`对象来预构建路径，减少绘制时的计算。 4. 使用`putImageData`将修改后的`ImageData`对象放回画布，以提高效率。 5. 对于复杂图形，可以使用`drawImage`绘制已渲染到另一canvas...
bootstrap学习笔记-html5
12-22
4. **Canvas和SVG**：<canvas>元素提供了在浏览器中动态绘制图形的能力，而SVG（可缩放矢量图形）则用于创建清晰的、高质量的矢量图像。 5. **表单控件**：HTML5对表单元素进行了增强，例如新增了date、time、email...
html：canvas画布绘图简单入门-1
彭世瑜的博客
12-25 2036
文档： https://www.runoob.com/tags/ref-canvas.html 示例1 绘制简单图形 <!-- 默认宽高：300x150 --> <canvas id="canvas" width="300" height="150"></canvas> <script> // 获取画布对象 let canvas = document.querySelector('#canvas');
HTML中的Canvas画布的简单使用
m0_67883007的博客
12-19 2861
Canvas 表示画布，现实生活中的画布是用来作画的。HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。
探索HTML Canvas：创意绘图与网页美化（秒懂网页Canvas绘图）
百赢出品，必属精品
04-08 1222
canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。Canvas是HTML5提供的一个元素，用于通过JavaScript绘制图形。绘制图形：Canvas可以绘制各种形状、线条、文本和图像，使开发者能够灵活地创建图形效果。动态更新：Canvas提供了API，开发者可以通过JavaScript动态更新画布上的图形，实现实时的数据可视化和动画效果。高性能。
HTML5福利篇--使用Canvas画图
小马哥的博客
09-22 2348
浏览器不支持
Html利用Canvas绘制图形
zls365365的博客
07-25 369
今天接到粉丝私信，询问是否可以通过Canvas绘制一些图形，然后根据粉丝提供的模板图，通过Canvas进行模拟绘制，通过分析发现，图形虽然相对简单，但是如果不借助相应的软件，纯代码绘制还是稍微费些时间。今天将绘制图形源码分享出来，仅供学习分享之用，如有不足之处，还请指正。什么是Canvas?Canvas表示一个图形容器（称之为画布），可以使用Javascript脚本来绘制图形。Canvas坐标Ca...
HTML5基础之canvas绘图(一)
zhxiong1994的博客
09-22 560
canvas是html5中新定义的标签，它是提供一张画布，通过JavaScript来绘制图形。值得注意的是canvas 元素本身是没有绘图能力的，所有的绘制工作必须要是在 JavaScript 内部完成的。
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
最新发布
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
html5&css3学习笔记下载
09-21
3. Canvas绘图：HTML5的<canvas>元素允许开发者使用JavaScript绘制图形、动画和游戏等，提供了更强大的图形处理能力。 4. 本地存储：HTML5提供了本地存储功能，包括LocalStorage和SessionStorage，可以在客户端存储...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

俊小赞

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

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

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

打赏作者

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

抵扣说明：

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

余额充值