创建 canvas

<!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><style>body {margin: 0;}</style>
</head>
<body><canvas width="500" height="500">You browser doesn't support canvas</canvas><script>const cvs = document.querySelector('canvas')const context = cvs.getContext('2d')</script>
</body>
</html>

可以通过 width 和 height 设置 canvas 的宽高（不带 px 单位），然后在 js 代码中获取 canvas 元素，调用 canvas.getContext('2d') 获取 2d 上下文。

简单绘图

可以通过 canvas context 的如下属性对图形的填充和描边进行设置：

context.fillStyle 图形的填充颜色，可以是十六进制颜色、rgb、颜色单词等
context.strokeStyle 描边颜色，可取值同上
context.lineWidth 线条宽度，不带 px 单位
context.fillRect(x, y, width, height) 绘画指定颜色填充的矩形
context.strokeRect(x, y, width, height) 描边指定颜色的矩形
context.clearRect(x, y, width, height) 清除指定区域的矩形，可以用来初始化画布、挖空图形

直接绘制矩形

context.fillStyle = 'red'
context.strokeStyle = 'blue'
// 在 (0, 0) 处绘制一个宽高为 100px 的正方形
context.fillRect(0, 0, 100, 100)
// 在 (200, 200) 处描边一个宽高为 100px 的正方形
context.strokeRect(200, 200, 100, 100)
// 清除所有图形（初始化画布）
context.clearRect(0, 0, 500, 500)

绘制路径

以下所有方法调用前，都必须使用 context.beginPath() 方法来声明开始绘制路径。

context.arc(x, y, radius, startAngle, endAngle, counterclockwise) 以 (x, y) 为圆心，radius 为半径，绘制指定起始角度到结束角度的弧线，counterclockwise 表示是否以逆时针计算起始角和结束角。可以设置 startAngle=0，endAngle=2 * Math.PI 绘制一个圆形。
context.moveTo(x, y) 将光标移动到 (x, y)
context.lineTo(x, y) 从当前光标起始位置绘制到 (x, y) 的线条
context.rect(x, y, width, height) 以 (x, y) 为起点创建一个矩形路径，和 fillRect 的区别是这个方法不会绘制实际的图形
arcTo(x1, y1, x2, y2, radius)以给定半径 radius，经由(x1, y1)绘制一条从上一点
到(x2, y2)的弧线

创建路径之后，可以使用 closePath() 方法绘制一条返回起点的线。如果路径已经完成，则既可以指定 fillStyle 属性并调用 fill() 方法来填充路径，也可以指定 strokeStyle 属性并调用 stroke() 方法来描画路径，还可以调用 clip() 方法基于已有路径创建一个新剪切区域。

绘制文本

绘制文本主要用下面两个方法：

fillText
strokeText

这两个方法的参数都是 str、x、y、maxWidth，表示要绘制的字符串的 x、y 坐标和最大宽度。

此外，最终绘制的文本还和 context 设置的文本格式有关：

// 字体
context.font = "bold 14px Arial";
// 在坐标中的对齐方式，如下是正常的对齐方式
context.textAlign = "center";
context.textBaseline = "middle";

变换、阴影、渐变

不想记了，见 MDN

[JS] canvas 详解相关推荐

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果二.Three.js简介三.Three.js代码正常运行显示条件 (1)不载入 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
canvas插件_HTML系列之-HTML5新元素之Canvas详解
课程简介: 课程目标:通过本课程学习,掌握HTML5中图形绘制canvas的基本原理和使用,并利用canvas解决实际相关问题. 适用人群:具有一定html.css.javascript开发基础的人员 ...
Python爬虫JS解密详解，学会直接破解80%的网站（一）！！！
文章目录 1.网页查看 2.有道翻译简单实现源码 3.JS解密(详解) 4.python实现JS解密后的完整代码 4.1.实现效果 5.JS解密后完整代码升级版 5.1.实现效果 CSDN独家福利降临 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
最简单太阳系H5动画canvas详解零基础可入
最简单太阳系H5动画canvas详解零基础可入最终结果:(实际为动画效果,金星绕轨道转动) 页面准备/html 要使用canvas,需要首先在页面中要绘制的位置放入canvas标签元素,在后期的绘 ...
扬州掼蛋游戏网JS特效详解
WEB前端特效现在是满天飞,今天拿扬州掼蛋游戏网来举例说明jQuery 在现在的 Web 开发项目中扮演着重要角色,借助 jQuery 可以让网站有更好的可用性和用户体验,让访问者对网站留下 ...
JS运算符详解与优先级
JS运算符详解与优先级算术运算符赋值运算符一元运算符比较运算符逻辑运算符运算符优先级算术运算符 + 求和 - 求差 * 求积 / 求商 % 求余取模乘除取余优先级相同,加减优先级相同 ...
Node.js npm 详解
一.npm简介安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

[JS] canvas 详解