Canvas 06
canvas画布状态的保存和恢复 save() —— 保存画布 (canvas) 的所有状态 restore() —— 恢复画布之前保存状态 保存的Canvas状态就是当前画布应用的所有样式和变形的一个快照。 我们可以想象canvas的状态保存在一个栈里面，调用save就会将栈状态保存到栈中。调用restore将保存的状态从栈弹出。 画布的变形（平移、缩放、旋转） 样式属性 strokeStyle...
Canvas 05
绘制图片 图像操作能力，可以动态合成图形或者使用图片作为背景图。 引入图片到canvas中： 获取一个HTMLImageElement的元素或者canvas元素。 使用drawImage将图片源绘制到画板上。 支持的哪些类型的图片源 HTMLImageElement 可以由Image函数构造或者元素 HTMLVideoElement 元素，抓取当前帧作为图片源 HTMLCanvasElement ...
Canvas 04
绘制文字 fillText(text, x, y [, maxWidth]) strokeText(text, x, y [, maxWidth]) 填充文本示例 ` function draw() { var ctx = document.getElementById("canvas").getContext("2d"); ctx.font = "48px serif"; ctx.f...
Canvas 03
颜色 在前面的章节例子中，我们都是使用默认的线条和填充样式。 fillStyle = color 设置图形填充颜色。 strokeStyle = color 设置图形轮廓颜色。 color可以是css的颜色值，渐变对象和图案对象。 fillStyle属性例子 ` function draw() { const ctx = document.getElementById("canvas")....
Canvas 02
canvas画布栅格 默认canvas画布就一个高150px，宽300px空间区域。 我们说的网格中一个单位就相当于一个像素，我们可以把他看成一个 二维空间坐标系，以左上角为原点，所有元素的位置都是相对于原点进行 定位。我们可以平移原点，旋转，缩放我们的canvas栅格。 canvas图像绘制 不同于SVG，canvas只支持两种形式的图形绘制：矩形和路径。 矩形绘制 fillRect(x,y,w...
Canvas 01
canvas元素 ` ` canvas元素就是一个HTML标签，默认初始化的宽度为300px高度为150px 我们可以使用css样式调整他的尺寸，但是如果CSS尺寸和画布尺寸不一致，可能会出现图像缩放，导致失真问题。（这点十分重要，涉及到绘图坐标的确认） 可以指定canvas元素的width和height参数，避免绘制出来的图像扭曲。 默认内容 我们知道canvas标签能力已经被大部分浏览器支持，...