正文

canvas入门(代码片段)

thby  thby  2023-03-23  440

关键词：

为什么要使用 Canvas

可能你有同样的疑惑，那不妨先问自己一个问题：当你需要在网页上展示一些形状的时候，你会怎样做？
面对一些简单的形状（点、直线、矩形、直角三角形等）且在仅用于展示的情况下，其实用 HTML 配合 CSS 就可以完成。
对于 CSS 有一定了解的话，你会发现复杂的图形也不过是简单图形的拼接，同样可以用如上的方式来完成。
但是，一旦需要图形和图形之间产生动态联系，HTML 和 CSS 的弊端就暴露了出来：需要同时兼顾页面结构与样式，创作成本增加
举一个例子：使用 HTML 和 CSS 来展示一个角为30°的直角三角形

涉及到角度的话，很自然地可以想到 CSS 中的 transform: rotate() 属性，所以在这个例子中我选择增加一个“遮罩层”，颜色与背景保持一致。
这样一来，根据 \\(90°-遮罩层旋转的角度=30°\\) 就得到了遮罩层旋转的角度，就得到了图中的效果。
使用 CSS 中的 clip-path 也可以实现多边形的展示（通过设定显示的部分和隐藏的部分），但是想要再对图形进行变换，还需要引入 JavaScript 来实现动态效果，这无疑增加了工作量。
而上面这些内容就是使用 Canvas 的理由：更直接地达成目的。

同样的三角形，使用 canvas 制作还可以调整三角形的大小。在这个过程中仅使用了 HTML 和 JavaScript，而在 HTML 中不用担心页面样式，只专注于 JavaScript 的绘图即可。

Canvas 的由来

提起 Canvas 的由来，MDN 上的说法再一次让我感受到了 Apple 也就是苹果公司的牛犇之处：

<canvas> 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。
为了自己的产品和品牌无尽地整活就完事了。

Canvas的使用

第一次接触 Canvas

说到 Canvas 的使用，最早接触是在大学一年级。当时有一门课叫做《网页设计与制作》，在那个里面我知道了原来 Canvas 就是一个标签 <canvas></canvas>，在页面结构里包含 <canvas>...</canvas> 不就是 Canvas 的使用了嘛。
而当时的例子也就是用 Canvas 画了一个矩形，我就觉得这跟用具有长度、宽度、背景的 <div> 没有任何区别，于是乎在那之后的很长一段时间里，我觉得 HTML5 并没有什么了不起。

展示 canvas

上面的第一次接触其实也提到了在页面中使用 Canvas 的方式，即以标签的形式呈现在 HTML 文档中即可。

<!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>Document</title>
  </head>
  <body>
    <canvas></canvas>
  </body>
</html>

这个时候打开页面发现还是一片空白，但是在开发者模式下可以看到 <canvas> 标签对应与页面中有一个宽度为 300 像素和高度为 150 像素的矩形，而这个就是我们的 canvas 即画布的大小，之后的绘图都会在上面进行。
可以通过 width 和 height 两个标签对 canvas 的宽度和高度进行设置，默认情况下宽度和高度如上。

...
    <canvas  ></canvas>
    <!-- 此时宽度为 300px， 高度为 200px -->
...

改变 canvas 内容

不同于以往接触的大部分 HTML 标签，在 <canvas></canvas> 的开始标签和闭合标签内部写入的一切内容（包括文本和其他标签）都会被视为替代内容，即只有在当前浏览器不支持 Canvas 的情况下才会显示出来的内容（类比 <img> 中的 alt 属性应用场景）
那么如何改变 canvas 即画布上的内容就需要用到一开始提到的 JavaScript 来动态绘制内容。
作为 HTML 中的一个标签元素，我们在对 canvas 中的内容进行改变的之前，首先就要获得这个元素。

获得 canvas

let canvas = document.getElementsByTagName("canvas")[0];

获取上下文

Canvas 发展至今，除了本文主要关注的 2d 图形以外，还可以对 3d 图形进行绘制。由此，获得 <canvas> 元素后，还需要明确它的适用场景（以 2d 为例）

let canvas = document.getElementsByTagName("canvas")[0];
let canvasContext = canvas.getContext("2d");

现在，canvasContext 就是画布的 2d 对象了，通过调用该对象的方法，就可以描绘一个图形所需要的点、线（直线、曲线）、面（多边形、圆）。

开始绘制

不同于真正地在画布上进行创作，使用 Canvas 绘制图形首先需要我们了解其绘图的原理。
此时可以回想在初中阶段学习到的平面直角坐标系，其将数与形结合起来的特质在今天也应用地相当广泛，而 Canvas 就是其中一个例子。
画布中的坐标系，以左上的画布顶点为公共点，即原点；水平向左为横轴正方向，垂直向下为纵轴正方向。区别于以往了解到的平面直角坐标系

比如 \\((100, 100)\\) 指的就是画布上，横向看在原点左方 100 像素；纵向看在原点下方 100 像素的点。
知道如何明确点的位置，接下就是路径，也就是一个点如何到另外一个点。
路径的设置就涉及到内置函数 lineTo 和 arcTo ，前者绘制直线，后者绘制曲线

let canvas = document.getElementsByTagName("canvas")[0];
let convasContext = canvas.getContext("2d");
// 移动到 (100, 100)
convasContext.moveTo(100, 100);
// 画直线到 (150, 150)
convasContext.lineTo(150, 150);
// 描边
convasContext.stroke();

上段代码中最后的 stroke() 决定了绘图的展示形式，即描边，除此以外还有 fill() 也就是填充。需要注意，填充需要满足绘制的形状为闭合图形。

后续

了解 Canvas 对象的具体用途后，接下来就是根据个人需求结合 Canvas 文档和丰富的第三方库开始进行自己的创作，在这个过程中提升自己的数学功底

canvas入门01-基础知识(代码片段)

定义一个canvas，直接在Html中使用canvas便签即可。1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial- 查看详情

canvas入门－利用canvas制作一个七巧板(代码片段)

?简介<canvas>是HTML5新增的元素之一，它允许脚本语言动态渲染位图像。最初是由Apple引入，用于MacOSX的仪表盘，后来又在Safiri和GoogleChrome中被实现。<canvas>就像个神奇的画布，你可以在上面画出你想要的绚丽的效果。使用... 查看详情

canvas入门，就是这个feel！(代码片段)

钙素Canvas是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。也就是说我们将通过JS完成画图而不是css。canvas默认布局为inline-block，可以认为是一种特殊的图片。... 查看详情

canvas的基础入门(代码片段)

canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西，比如动画，游戏，动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来... 查看详情

canvas入门级基本用法实现雨滴下落特效(代码片段)

canvas基础知识点参考各种文档，直接上代码，有非常详细注释<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>canvas雨滴特效</title><style>bodymargin:0;overflow:hidden;#raindisplay:blo 查看详情

canvas入门04-绘制矩形(代码片段)

使用的API:ctx.strokeRect(x,y,width,height)给一个矩形描边ctx.fillRect(x,y,width,height)填充一个矩形ctx.clearRect(x,y,width,height)清除矩形区域ctx.lineJoin=‘round‘|‘bevel‘|‘miter‘ 定义线交点处的样式varcanvas=document.getElementB 查看详情

canvas入门08-绘制仪表盘(代码片段)

需求实现下图所示的仪表盘的绘制。分析我们先来将仪表盘进行图形拆分，并定义尺寸。我们绘制的逻辑：绘制中心圆绘制环外圈圆绘制环内圈圆绘制刻度内圈圆绘制刻度线绘制刻度文字绘制指针定义圆varcircle=x:canvas.width/2,y:canv... 查看详情

canvas入门－利用canvas画国旗(代码片段)

...eTo()lineTo()closePath()具体用法可以参考我的上一篇文章canvas入门－利用canvas制作一个七巧板矩形的绘制canvas提供了三种绘制矩形的方法：fillRect(x,y,width,height)绘制一个填充的矩形strokeRect(x,y,width,height)绘制一个矩形的边框clearRect(x,y,w... 查看详情

harmonyos鸿蒙学习笔记（16）canvas入门使用(代码片段)

Canvas入门指南1、Canvas代码结构2、简单案例2.1fillStyle和fillRect绘制蓝色矩形2.2strokeRect和strokeStyle绘制红色边框2.3lineCap的使用2.4lineJoin的使用2.5closePath的使用3、参考资料1、Canvas代码结构在使用Canvas的时候，需要向初始化RenderingC... 查看详情

harmonyos鸿蒙学习笔记（16）canvas入门使用(代码片段)

jetpackcompose从入门到入门(代码片段)

本篇说说Compose中的Canvas。1.Canvas@ComposablefunCanvas( modifier:Modifier, onDraw:DrawScope.()->Unit)=Spacer(modifier.drawBehind(onDraw))modifier：这里主要作用是指定画布的大小。onDraw就是执行具体的绘制。可以看到它提供了一个绘查看详情

canvas:几个入门需要的基本概念(代码片段)

这段时间做项目需要用canvas。而我在看文档的时候，发现canvas是一个很独立的API：和DOMBOM基本上没什么关系。在学习canvas的时候需要了解很多概念，否则看某些文档的讲解可能会看不懂，比如MDN。那么，第一步。<canvasid="canvas"... 查看详情

vue2-canvas库konvajs入门1安装与引用(代码片段)

KonvaJS入门1安装与引用一、简介二、Vue2下安装与引用1.npm安装2.引用3.使用三、基本图形1.常用属性3.1.1config配置属性2.文本3.正方形4.圆5.线段下面是画三角形，每个边带0.2弧度。连接与端子形状虚线6.椭圆7.楔形一、简介KonvaJS... 查看详情

为了让她10分钟入门canvas，我熬夜写了3个小项目和这篇文章(代码片段)

...c;为此，我特地写了3个小项目，让你们10分钟就能入门canvas，是的&# 查看详情

canvas入门(代码片段)

为什么要使用Canvas可能你有同样的疑惑，那不妨先问自己一个问题：当你需要在网页上展示一些形状的时候，你会怎样做？面对一些简单的形状（点、直线、矩形、直角三角形等）且在仅用于展示的情况下，其实用HTML配合CSS就... 查看详情

jetpackcompose从入门到入门(代码片段)

porterduffxfermode之porterduff.mode.xor入门学习(代码片段)

packagecom.loaderman.customviewdemo.view;importandroid.content.Context;importandroid.graphics.*;importandroid.util.AttributeSet;importandroid.view.View;publicclassPorterDuffXfermodeViewextendsViewprivateintwidth=100;privateintheight=100;privateBitmapdstBmp;privateBitmapsrcBmp;privatePaintmPaint;publ... 查看详情

canvas库konvajs入门2坐标体系总结(代码片段)

Canvas库KonvaJS入门2坐标体系总结一、准备环境二、konvasJS坐标基本使用演示1.按坐标放置控件2.移动group3.父元素scale变化4.子元素scale变化5.旋转一、准备环境KonvaJS的几个属性值与坐标都有关系，有时候不容易分清坐标如何计算&... 查看详情