图形转换
API
| API | 描述 |
|---|---|
| translate(x, y) | 移动 canvas 的原点到一个不同的位置 · x 是左右偏移量，y 是上下偏移量 · 在 canvas 中 translate 是累加的 |
| rotate(angle) | 旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值 · 旋转的中心点始终是 canvas 的原点，如果要改变它，需要用到 translate 方法 · 在 canvas 中 rotate 是累加的 |
| scale(x, y) | 在 canvas 中的像素数目，对形状、位图进行缩小或者放大 · x、y 是横轴和纵轴的缩放因子，必须是正值，值比 1.0 小则缩小，比 1.0 大则放大，值为 1.0 时什么效果都没有 · 在 canvas 中 scale 是累乘的 |
案例：移动
-
示例代码
HTMLJavaScript<canvas id="canvas" width="600px" height="250px"></canvas>window.onload = function () { var canvas = document.querySelector("#canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.fillRect(0, 0, 50, 50); // 在canvas中translate是累加的：向右偏移100、向下偏移100 ctx.translate(50, 50); ctx.translate(50, 50); // 与上面的代码的等价 // ctx.translate(100,100) ctx.beginPath(); ctx.fillRect(0, 0, 50, 50); } } -
效果展示
案例：旋转
-
示例代码
HTMLJavaScript<canvas id="canvas" width="600px" height="250px"></canvas>window.onload = function () { var canvas = document.querySelector("#canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = '#eee'; ctx.fillRect(0, 0, 200, 100); // 在canvas中rotate是累加的，以（0，0）为原点旋转 45 度 ctx.rotate(22.1 * Math.PI / 180) ctx.rotate(22.9 * Math.PI / 180) // 与上面的代码的等价 // ctx.rotate(45 * Math.PI / 180) ctx.beginPath(); ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 200, 100); } } -
效果展示
案例：缩放
-
示例代码
HTMLJavaScript<canvas id="canvas" width="600px" height="250px"></canvas>window.onload = function () { var canvas = document.querySelector("#canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.scale(2, 2); ctx.fillRect(0, 0, 50, 50); ctx.beginPath(); ctx.translate(100, 0); ctx.scale(2, 2); // 放大：使画布内css像素的个数变少，单个css像素所占据的实际物理尺寸变大 // 缩小：使画布内css像素的个数变多，单个css像素所占据的实际物理尺寸变小 ctx.fillRect(0, 0, 50, 50); } } -
效果展示
渐变
API
| API | 描述 |
|---|---|
| createLinearGradient(x1, y1, x2, y2) | 创建线性渐变实例，渐变的起点 (x1, y1) 与终点 (x2, y2) |
| createRadialGradient(x1, y1, r1, x2, y2, r2) | 创建径向渐变实例 · x1, y1, r1 定义另一个以 (x1, y1) 为原点，半径为 r1 的圆 · x2, y2, r2 定义另一个以 (x2, y2) 为原点，半径为 r2 的圆 |
| addColorStop(position, color) | 定义渐变 · position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置 · color 参数必须是一个有效的 CSS 颜色值 |
案例：线性渐变
-
示例代码
HTMLJavaScript<canvas id="canvas" width="600px" height="250px"></canvas>window.onload = function () { var canvas = document.querySelector("#canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 200, 200); gradient.addColorStop(0, "red"); gradient.addColorStop(0.5, "yellow"); gradient.addColorStop(0.7, "pink"); gradient.addColorStop(1, "green"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 300, 300); } } -
效果展示
案例：径向渐变
-
示例代码
HTMLJavaScript<canvas id="canvas" width="600px" height="250px"></canvas>window.onload = function () { var canvas = document.querySelector("#canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); var gradient = ctx.createRadialGradient(130, 130, 50, 130, 130, 100) gradient.addColorStop(0, "red"); gradient.addColorStop(0.5, "yellow"); gradient.addColorStop(0.7, "pink"); gradient.addColorStop(1, "green"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 300, 300); } } -
效果展示
合成
属性
| 属性 | 描述 |
|---|---|
| globalAlpha | 影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 ~ 1.0 ，默认是 1.0 |
| globalCompositeOperation | 覆盖合成 · source-over：在目标图像上显示源图像（默认） · source-atop：在目标图像顶部显示源图像，源图像位于目标图像之外的部分是不可见的 · source-atop：在目标图像顶部显示源图像，源图像位于目标图像之外的部分是不可见的 · source-in：在目标图像中显示源图像，只有目标图像内的源图像部分会显示，目标图像是透明的 · source-out：在目标图像之外显示源图像，只会显示目标图像之外源图像部分，目标图像是透明的 · destination-over：在源图像上方显示目标图像 · destination-atop：在源图像顶部显示目标图像，源图像之外的目标图像部分不会被显示 · destination-in：在源图像中显示目标图像，只有源图像内的目标图像部分会被显示，源图像是透明的 · destination-out：在源图像外显示目标图像，只有源图像外的目标图像部分会被显示，源图像是透明的 · lighter：显示源图像 + 目标图像 · copy：显示源图像，忽略目标图像 · xor：使用异或操作对源图像与目标图像进行组合 |
案例：全局透明度
-
示例代码：
HTMLJavaScript<canvas id="canvas" width="600px" height="250px"></canvas>window.onload = function () { var canvas = document.querySelector("#canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(0, 0, 100, 100); ctx.fillStyle = "red"; ctx.globalAlpha = 0.5; ctx.fillRect(100, 100, 100, 100); } } -
效果展示
案例：覆盖合成
-
示例代码
HTMLJavaScript<body></body>function canvasApp() { var w = 300; var h = 300; var compositing = ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity']; var len = compositing.length; var first = document.body.firstChild; function drawScreen() { for (var i = 0; i < len; i++) { var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; document.body.insertBefore(canvas, first); } var canvas = document.querySelectorAll('canvas'); for (var i = 0; i < canvas.length; i++) { var ctx = canvas[i].getContext('2d'); ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = compositing[i]; ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.restore(); ctx.fillStyle = 'black'; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.font = '30px Arial'; ctx.fillText((i + 1) + ': ' + compositing[i], w / 2, 40); } } drawScreen(); } canvasApp(); -
效果展示
打赏作者
您的打赏是我前进的动力
微信
支付宝
🏷 canvas 绘制矩形、路径、曲线、文本、阴影
上一篇
评论
