canvas基础2

最新推荐文章于 2024-11-16 14:11:26 发布

桃园码工

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量66

点赞数

分类专栏： canvas 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_42478311/article/details/130012978

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文介绍了HTML5Canvas的基础知识，包括如何使用2d绘图上下文来绘制路径，创建复杂的形状和线条，以及绘制文本并调整对齐方式。同时，文章讲解了变换技巧，如移动原点、旋转和缩放，以及如何利用save()和restore()方法保存和恢复绘图状态。

摘要由CSDN通过智能技术生成

canvas基础2

一、绘制路径

// 2d 绘图上下文支持很多在画布上绘制路径的方法。
// 通过路径可以创建复杂的形状和线条。

let drawing = document.getElementById("drawing");
         
// 确保完全支持＜canvas＞
if (drawing.getContext) {
  let context = drawing.getContext("2d");
  
  // 启动路径
  context.beginPath();
         
  // 绘制外圆
  context.arc(100, 100, 99, 0, 2 * Math.PI, false);
  
  // 绘制内圆
  context.moveTo(194, 100);
  context.arc(100, 100, 94, 0, 2 * Math.PI, false);
  
  // 绘制分针
  context.moveTo(100, 100);
  context.lineTo(100, 15);
  
  // 绘制时针
  context.moveTo(100, 100);
  context.lineTo(35, 100);
  
  // 描画路径
  context.stroke();
}

// 浏览器输出如下

绘制路径

二、绘制文本

// 文本和图像混合也是常见的绘制需求，因此 2d 绘图上下文还提供了绘制文本的方法，即 fillText() 和 strokeText()。

// 下面的例子会在前一节示例的表盘顶部绘制数字“12”：

  context.font = "bold 14px Arial";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillText("12", 100, 20);

绘制文本

// 如果textAlign是“start”，那么 x 坐标在从左到右书写的语言中表示文本的左侧坐标，
// 而“end”会让 x 坐标在从左到右书写的语言中表示文本的右侧坐标。

// 正常
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
// 与开头对齐
context.textAlign = "start";
context.fillText("12", 100, 40);
// 与末尾对齐
context.textAlign = "end";
context.fillText("12", 100, 60);

绘制文本2

// measureText() 方法使用font、textAlign 和 textBaseline 属性当前的值计算绘制指定文本后的大小。


let drawing = document.getElementById("drawing");
         
// 确保完全支持＜canvas＞
if (drawing.getContext) {
  let context = drawing.getContext("2d");
  
  let fontSize = 100;
  context.font = fontSize + "px Arial";
  while(context.measureText("Hello world!123aaaaa").width > 140) {
    fontSize--;
    context.font = fontSize + "px Arial";
  }
  context.fillText("Hello world!123aaaaa", 10, 10);
  context.fillText("Font size is " + fontSize + "px", 10, 50); 
}

绘制文本3

三、变换

// 上下文变换可以操作绘制在画布上的图像。2d 绘图上下文支持所有常见的绘制变换。

// 变换可以简单，也可以复杂。

// 例如，在前面绘制表盘的例子中，如果把坐标原点移动到表盘中心，那再绘制表针就非常简单了：


let drawing = document.getElementById("drawing");
         
// 确保完全支持＜canvas＞
if (drawing.getContext) {
  let context = drawing.getContext("2d");
  
  // 启动路径
  context.beginPath();
         
  // 绘制外圆
  context.arc(100, 100, 99, 0, 2 * Math.PI, false);
  
  // 绘制内圆
  context.moveTo(194, 100);
  context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    
  // 移动原点到表盘中心
  context.translate(100, 100);
  
  // 绘制分针
  context.moveTo(0, 0);
  context.lineTo(0, -85);
  
  // 绘制时针
  context.moveTo(0, 0);
  context.lineTo(-65, 0);
  
  // 描画路径
  context.stroke();
}

// 浏览器输出如下

// 当然，也可以使用rotate（）方法来转动表针：

//旋转表针
context.rotate(1);



let drawing = document.getElementById("drawing");
         
// 确保完全支持＜canvas＞
if (drawing.getContext) {
  let context = drawing.getContext("2d");
  
  // 启动路径
  context.beginPath();
         
  // 绘制外圆
  context.arc(100, 100, 99, 0, 2 * Math.PI, false);
  
  // 绘制内圆
  context.moveTo(194, 100);
  context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    
  // 移动原点到表盘中心
  context.translate(100, 100);
    
  //旋转表针
  context.rotate(1);
  
  // 绘制分针
  context.moveTo(0, 0);
  context.lineTo(0, -85);
  
  // 绘制时针
  context.moveTo(0, 0);
  context.lineTo(-65, 0);
  
  // 描画路径
  context.stroke();
}

// 浏览器输出如下

变换2

// 如果想着什么时候回到当前的属性和变换状态，可以调用 save() 方法。

// 调用这个方法后，所有这一时刻的设置会被放到一个暂存栈中。

let drawing = document.getElementById("drawing");
         
// 确保完全支持＜canvas＞
if (drawing.getContext) {
  let context = drawing.getContext("2d");
  
  context.fillStyle = "#ff0000";
  context.save();
           
  context.fillStyle = "#00ff00";
  context.translate(100, 100);
  context.save();
           
  context.fillStyle = "#0000ff";
  context.fillRect(0, 0, 100, 200);   // 在（100，100）处绘制蓝色矩形
           
  context.restore();
  context.fillRect(10, 10, 100, 200);   // 在（110，110）处绘制绿色矩形
           
  context.restore();
  context.fillRect(0, 0, 100, 200);  // 在（0,0）处绘制红色矩形

}


// 浏览器输出如下