随猿录

创建画笔对象

# 创建画笔对象

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

# 画笔对象常用成员

  • 绘制矩形
  • 绘制文本
  • 绘制路径
  • 绘制图像

# 绘制矩形

矩形的定位点在左上角

ctx.lineWidth = 1; // 描边的线宽

ctx.strokeStyle = "#000"; // 描边样式

ctx.fillStyle = "#000"; // 填充样式

ctx.strokeRect(x, y, width, height); // 描边一个矩形

ctx.fillRect(x, y, width, height); // 填充一个矩形

ctx.clearRect(x, y, width, height); // 清除一个矩形范围内的所有内容

# 绘制文本

说明：一段文字的定位点默认在文本基线的最左侧

ctx.textBaseline = "alphabetic"; // 文件基线

ctx.font = "12px sans-senrif"; // 文本大小和字体

ctx.strokeText(txt, x, y); // 描边一段文本

ctx.fillText(txt, x, y); // 填充一段文本

ctx.measureText(txt).width; // 基于当前字体设置，测量指定的文本宽度

基础