HTML5 Canvas – 样式和颜色

HTML5 Canvas – 样式和颜色

HTML5 Canvas 是从 Web 开发中引入的一个实用工具。它可以用于创建包括动画、游戏、绘图和其他多媒体元素等在内的各种视觉元素。本文主要介绍如何利用 Canvas 来设置样式与颜色。

Canvas 坐标系

在 Canvas 中,像素被绘制在 x 和 y 坐标轴中间的交叉点上。原点 (0,0) 在 Canvas 左上角(默认情况下)。向右和向下分别是正方向。

设置样式

在 Canvas 中,可以根据需求设置各种样式属性。例如,在绘制形状时,可以设置线条的宽度和颜色,或者用渐变或图案来填充形状。下面,我们来一一介绍这些样式属性。

线条样式

lineWidth

lineWidth 属性用于设置线条的宽度。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();

lineCap

lineCap 属性用于设置线条的端点形状。它有三个可用的值:butt(默认值)、round 和 square。

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(150, 50);
ctx.lineTo(200, 100);
ctx.stroke();

lineJoin

lineJoin 属性用于设置线条的连接样式。它有三个可用的值:miter(默认值)、bevel 和 round。

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = 'bevel';
ctx.moveTo(250, 50);
ctx.lineTo(300, 75);
ctx.lineTo(250, 100);
ctx.stroke();

渐变填充样式

Canvas 支持两种渐变,线性渐变和径向渐变。

线性渐变

createLinearGradient 方法用于创建线性渐变对象。它有四个参数:起始点的坐标 (x1, y1) 和终点的坐标 (x2, y2)。

ctx.beginPath();
const gradient = ctx.createLinearGradient(50, 150, 150, 150);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(50, 150, 100, 50);

径向渐变

createRadialGradient 方法用于创建径向渐变对象。它有六个参数:两个圆的中心 (x1, y1) 和 (x2, y2),以及两个圆的半径 r1 和 r2。

ctx.beginPath();
const gradient = ctx.createRadialGradient(250, 150, 50, 250, 150, 100);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(200, 100, 100, 100);

图案填充样式

pattern 属性用于填充图案。

createPattern

createPattern 方法用于创建 pattern 对象。

const img = new Image();
img.src = 'pattern.png';
img.onload = function() {
  const pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(350, 100, 100, 100);
}

设置颜色

在 Canvas 中,颜色是固定的。可以使用多种方式来指定颜色。

RGB 和 RGBA 颜色

RGB 颜色

在 Canvas 中,RGB 颜色用于指定一种由红、绿、蓝三原色混合而来的颜色。每种颜色的取值范围是0-255。

ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.fillRect(50, 250, 50, 50);

ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(100, 250, 50, 50);

ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.fillRect(150, 250, 50, 50);

RGBA 颜色

在 Canvas 中,RGBA 颜色用于指定一种由红、绿、蓝三原色和 alpha 通道混合而来的颜色。每种颜色的取值范围是0-255,alpha 通道的取值范围是0-1,它表示颜色的透明度。

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(200, 250, 50, 50);

ctx.fillStyle = 'rgba(0, 255, 0, 0.75)';
ctx.fillRect(250, 250, 50, 50);

ctx.fillStyle = 'rgba(0, 0, 255, 0.25)';
ctx.fillRect(300, 250, 50, 50);

十六进制颜色

在 Canvas 中,也可以使用十六进制颜色来指定颜色。

ctx.fillStyle = '#ff0000';
ctx.fillRect(50, 350, 50, 50);

ctx.fillStyle = '#00ff00';
ctx.fillRect(100, 350, 50, 50);

ctx.fillStyle = '#0000ff';
ctx.fillRect(150, 350, 50, 50);

结论

通过本文的介绍,我们了解到了 Canvas 中如何设置样式和颜色。我们可以通过设置线条样式、渐变填充样式、图案填充样式和颜色等方式,使 Canvas 更加美观和实用。在实际项目中,合理设置 Canvas 的样式和颜色,能够增强用户的交互体验,使界面更加美观。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程