HTML5 Canvas CanvasRenderingContext2D 属性详细解读

最新推荐文章于 2025-03-12 22:59:22 发布

Ama_zhe

最新推荐文章于 2025-03-12 22:59:22 发布

阅读量1.2k

点赞数

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.csdn.net/Ama_zhe/article/details/106783372

版权

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了HTML5 Canvas API中的CanvasRenderingContext2D属性，包括fillStyle、strokeStyle、font、globalAlpha等关键属性的用法，并通过示例展示了如何设置颜色、阴影效果以及文本对齐方式等，帮助读者更好地理解和使用Canvas进行图形绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 Canvas API 之 CanvasRenderingContext2D

文档地址 Canvas API CanvasRenderingContext2D

1.属性

canvas 对与给定上下文关联的HTMLCanvasElement对象的只读引用

<canvas id="canvas"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas; // <canvas id="canvas"></canvas>

fillStyle 描述颜色和样式的属性 color | gradient | pattern

strokeStyle 画笔（绘制图形）颜色。默认 balck || #000

// color
ctx.fillStyle = "#333333";
ctx.fillStyle = "red"; 
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
// gradient
var grd = ctx.createLinearGradient(0, 0, 80, 0); // 设置线性渐变规则
grd.addColorStop(0, "black");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "black"); // 渐变范围 0 - 1
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 100, 100);

ctx.createLinearGradient(0, 80, 80, 0)
ctx.createLinearGradient(0, 0, 80, 80)
ctx.createLinearGradient(0, 0, 80, 0)

// pattern 元素可以是图片、视频，或者其他 <canvas> 元素
var img = new Image();
img.src = "img/test2.jpg";
img.onload = function(){
    var pat = ctx.createPattern(img, "repeat"); // repeat|repeat-x|repeat-y|no-repeat
    ctx.lineWidth = 30;
    ctx.strokeStyle = pat;
    ctx.arc(150, 150, 100, 0, 2 * Math.PI, false);
    ctx.stroke();
    ctx.closePath();
    // ctx.fillStyle = pat;
    // ctx.fillRect(0, 0, 100, 100);
    // ctx.fill();
}

ctx.arc(100, 100, 80, 0, 2 * Math.PI, false); 在这里插入图片描述
ctx.fillRect(0, 0, 100, 100);

font 符合CSS font 语法的DOMString 字符串。默认字体是 10px sans-serif。

ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);
// 加载自定义字体
var fot = new FontFace('testFont', 'url(x)');
fot.load().then(function() {
  ctx.font = "14px testFont";
});

globalAlpha 数字在 0.0 （透明）和 1.0 （不透明）之间。默认值是 1.0。

ctx.globalAlpha = 0.5;
ctx.globalAlpha = 44; // [0, 1] || 1
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

globalCompositeOperation 在绘制新形状时应用的合成操作的类型。<string>

ctx.globalCompositeOperation = "source-over";
// source-over 在现有的上面直接覆盖绘制
// source-in  重叠部分绘制，其余的透明
// source-out 不重叠部分绘制，其余的透明
// destination-over  在现有的下面直接填充绘制
// destination-in   在原有的上面取现有的轮廓部分
// destination-out   在原有的上面取现有轮廓之外的部分
... 太多了，直接看文档吧！

imageSmoothingEnabled 设置图片是否平滑的属性，true平滑（默认值），false不平滑。

ctx.imageSmoothingEnabled = true; // or false
var img = new Image();
img.src = 'img/test2.jpg';
img.onload = function() {
    ctx.drawImage(img, 0, 0, 100, 100);
    ctx.imageSmoothingEnabled = true;
    ctx.drawImage(img, 110, 0, 100 * 3, 100 * 3);
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(img, 420, 0, 100 * 3, 100 * 3);
};

在这里插入图片描述

lineCap 指定如何绘制每一条线段末端的属性。[butt | round | square] || butt

var lineCaps = ["butt", "round", "square"];

ctx.beginPath();
ctx.moveTo(10, 30);
ctx.strokeStyle = "#1b95f1";
ctx.lineWidth = 1;
ctx.lineTo(210, 30);
ctx.stroke();

ctx.strokeStyle = "red";
for (var i = 0, len = lineCaps.length; i < len; i++) {
  ctx.lineWidth = 20;
  ctx.lineCap = lineCaps[i];
  ctx.beginPath();
  ctx.moveTo(40 + i * 60, 30);
  ctx.lineTo(40 + i * 60, 310);
  ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(10, 310);
ctx.strokeStyle = "#1b95f1";
ctx.lineWidth = 1;
ctx.lineTo(210, 310);
ctx.stroke();

在这里插入图片描述

lineDashOffset 设置虚线偏移量 <float>

ctx.strokeStyle = "#1b95f1";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(10, 220);
ctx.stroke();
ctx.setLineDash([5, 6]); // arr[0]一节虚线长度 arr[1] 虚线间隔长度
ctx.strokeStyle = "#000";
for(var i = 0; i < 10; i++){
  ctx.lineDashOffset = 2 + i;
  ctx.beginPath();
  ctx.moveTo(10, 20 + 20 * i);
  ctx.lineTo(400, 20 + 20 * i);
  ctx.stroke();
}

在这里插入图片描述

lineJoin 设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，长度为0时忽略，[round | bevel | miter] || miter

ctx.strokeStyle = "#f00";
ctx.lineWidth = 10;
var lineJoins = ["round", "bevel", "miter"];
for(var i = 0, len = lineJoins.length; i < len; i++){
  ctx.lineJoin = lineJoins[i];
  ctx.beginPath();
  ctx.moveTo(10, 10 + 40 * i);
  ctx.lineTo(100, 100 + 40 * i);
  ctx.lineTo(200, 10 + 40 * i);
  ctx.stroke();
}

在这里插入图片描述

lineWidth 设置线段厚度, 数字或字符串，无效时默认为 1

ctx.lineWidth = 10;
ctx.lineWidth = "10"; // 测试同 10
ctx.lineWidth = ["10"]; // 测试同 10

miterLimit 斜接面限制比例的的数字。 0、负数、Infinity 和 NaN 都会被忽略

  ctx.strokeStyle = "#1b95f1";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, 30);
  ctx.lineTo(100, 30);
  ctx.stroke();

  ctx.strokeStyle = "#f00";
  ctx.lineWidth = 10;
  ctx.lineJoin = "miter";
  ctx.beginPath();
  ctx.miterLimit = 5; // 当miterLimit 的值大于斜切的长度时，相当于没有做限制，小于时则相当于设置lineJoin为bevel
  ctx.moveTo(10, 30);
  ctx.lineTo(30, 200);
  ctx.lineTo(60, 30);
  ctx.lineTo(90, 200);
  ctx.stroke();

  ctx.strokeStyle = "#1b95f1";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, 200);
  ctx.lineTo(100, 200);
  ctx.stroke();

ctx.miterLimit = 5; 在这里插入图片描述
ctx.miterLimit = 20;

shadowColor 设置阴影的颜色。shadowColor属性设置成不透明的，并且 shadowBlur、 shadowOffsetX 或者 shadowOffsetY 属性不为0，阴影才会被绘制。

shadowBlur 模糊效果程度，既不对应像素值也不受当前转换矩阵的影响。<float> || 0

ctx.shadowColor = "#333";
ctx.shadowBlur = 10;
ctx.fillStyle = "#fff";
ctx.fillRect(10, 10, 110, 110);

ctx.shadowBlur = 20;
ctx.fillStyle = "#fff";
ctx.fillRect(150, 10, 110, 110);

在这里插入图片描述

shadowOffsetX 阴影水平偏移距离

shadowOffsetY 阴影垂直偏移距离

ctx.shadowColor = "#333";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = "#fff";
ctx.fillRect(10, 10, 110, 110);

ctx.shadowBlur = 20;
ctx.fillStyle = "#fff";
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = -10;
ctx.fillRect(150, 10, 110, 110);

在这里插入图片描述

textAlign 绘制文本时，文本的对齐方式。[left | right | center | start | end] || start

ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.rect(0, 0, 400, 240);
ctx.stroke();
ctx.strokeStyle = "#1b95f1";
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(200, 240);
ctx.stroke();
ctx.font = "30px serif";
ctx.textAlign = "left";
ctx.strokeStyle = "#f00";
ctx.strokeText("Hello world", 0, 40);
ctx.textAlign = "center";
ctx.strokeText("Hello world", 200, 80);
ctx.textAlign = "right";
ctx.strokeText("Hello world", 400, 120);
ctx.textAlign = "start";
ctx.strokeText("Hello world", 0, 160);
ctx.textAlign = "end";
ctx.strokeText("Hello world", 400, 200);

在这里插入图片描述

textBaseline 绘制文本时，当前文本水平对齐基线。[top | hanging | middle | alphabetic | ideographic | bottom] || alphabetic

var baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
ctx.font = '30px serif';
ctx.strokeStyle = 'red';
// top 文本基线在文本块的顶部
// hanging  文本基线是悬挂基线
// middle  文本基线在文本块的中间
// alphabetic 文本基线是标准的字母基线
// ideographic 文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部
// bottom  文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母
baselines.forEach(function (baseline, index) {
  ctx.textBaseline = baseline;
  let y = 75 + index * 75;
  ctx.beginPath();
  ctx.moveTo(40, y + 0.5);
  ctx.lineTo(450, y + 0.5);
  ctx.stroke();
  ctx.fillText('Abcde我是中文 (' + baseline + ')', 40, y);
});