查看专栏目录

canvas示例教程100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。

什么是canvas

canvas是 HTML5 提供的一种新标签，通常被称为画布。是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。通过api提供了一种绘制的能力，它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于2D图形。而同样使用Canvas元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

canvas的默认属性

canvas只有两个属性width和height。当没有设置宽度和高度的时候，canvas 会默认宽度为 300 像素和高度为 150 像素。

 <canvas width="150" height="150" id="dajianshi"></canvas>

canvas的上下文

为了展示，首先js需要找到渲染上下文，然后在它的上面绘制。 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数，即上下文的类型，参考值有2d，webgl，webgl2，bitmaprenderer等。

const canvas = document.getElementById(‘demo’);
const ctx = canvas.getContext(‘2d’);
console.log(ctx);

代码中：ctx 就可以调用很多canvas内置的方法了，这个前奏是必须要有的。

canvas的坐标系

canvas的坐标系和我们数学中常用的直角坐标系不太一样，我们通常称为窗口坐标系，窗口坐标系统与直角坐标系统都含有x轴，y轴，两轴的交点为坐标原点（0，0），原点沿x轴向右方向为正值，不同的是原点沿y轴方向向下为正值。在canvas的2D绘图环境中的坐标系统，默认情况下以canvas的左上角为坐标原点，沿x轴向右为正值，沿y轴向下为正值。其中canvas坐标的单位都是 "px"。然而Canvas的坐标系并不是固定的，我们可以对坐标系统进行评议放缩及旋转，我们称为坐标变换——平移、缩放、旋转

canvas基本属性

属性	属性	属性
canvas	fillStyle	filter
font	globalAlpha	globalCompositeOperation
height	lineCap	lineDashOffset
lineJoin	lineWidth	miterLimit
shadowBlur	shadowColor	shadowOffsetX
shadowOffsetY	strokeStyle	textAlign
textBaseline	width

canvas基础方法

方法	方法	方法
arc()	arcTo()	addColorStop()
beginPath()	bezierCurveTo()	clearRect()
clip()	close()	closePath()
createImageData()	createLinearGradient()	createPattern()
createRadialGradient()	drawFocusIfNeeded()	drawImage()
ellipse()	fill()	fillRect()
fillText()	getImageData()	getLineDash()
isPointInPath()	isPointInStroke()	lineTo()
measureText()	moveTo()	putImageData()
quadraticCurveTo()	rect()	restore()
rotate()	save()	scale()
setLineDash()	setTransform()	stroke()
strokeRect()	strokeText()	transform()
translate()