Canvas学习笔记（1）

发表于
字数统计 549 字 | 阅读时长 2 分钟

什么是 Canvas

Canvas 是 html5 中新增的标签，用来在网页中创建一块画布。其本身只是一块区域，绘制需要用到 js 脚本

创建 Canvas

1
<canvas id="myCanvas" width="200" height="200"></canvas>

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
<canvas> 标签要有一个 id 用于在脚本中获取画布，同时注意 <canvas>必须是闭合的

##绘制 canvas

1
var ctx = document.getElementById('myCanvas').getContext('2d')

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

可以用一段简单的代码检查 canvas 的支持性

1
2
3
4
5
if (canvas.getContext) {
  var ctx = canvas.getContext('2d')
} else {
  //替换内容
}

绘制矩形

canvas 中一共有三种方法绘制矩形

1
2
3
ctx.fillRect(x, y, width, height) //绘制一个实心矩形
ctx.strokeRect(x, y, width, height) //绘制一个空心矩形
ctx.clearRect(x, y, width, height) //清除指定矩形区域，让清除部分完全透明

绘制路径

canvas只提供了矩形的api，因此绘制其他形状时需要通过创建路径来实现

绘制路径分为以下步骤

  1. 创建路径起始点
  2. 画出路径
  3. 关闭路径
  4. 使用描边或填充渲染图形 
1
2
3
4
5
6
beginPath() //创建路径
moveTo(x,y) // 移动笔触初始画笔位置
lineTo(x,y) // 绘制一条从当前指定位置x到y的直线
stroke() //通过线条绘制轮廓
fill() //填充路径的内容区域生成实心图形
closePath() //闭合路径

绘制一个三角形

1
2
3
4
5
6
7
var tri1Ctx = document.getElementById('tri2').getContext('2d')
 tri1Ctx.beginPath();
 tri1Ctx.moveTo(25,65);
 tri1Ctx.lineTo(105,5);
 tri1Ctx.lineTo(105,125);
 tri1Ctx.closePath()
 tri1Ctx.stroke();

圆形/圆弧

1
arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

1
arcTo(x1, y1, x2, y2, radius)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

1
2
3
circleCtx.beginPath()
circleCtx.arc(200,100,50,0,2*Math.PI)
circleCtx.fill()