Canvas文档-优快云博客

获取上下文对象

const canvas = document.getElementById('tutorial');

//获得 2d 上下文对象

let ctx = canvas.getContext('2d');

绘制矩形

1、fillRect(x, y, width, height)：绘制一个填充的矩形。

2、strokeRect(x, y, width, height)：绘制一个矩形的边框。

3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

3、clearRect(0, 0, canvas.width, canvas.height)：清除所有。
说明：

1、x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

2、width, height：指的是绘制的矩形的宽和高。

绘制路径

使用路径绘制图形需要一些额外的步骤：

1、beginPath()

新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径

2、moveTo(x, y)

把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。

3、ctx.lineTo(x,y)

绘制一条从当前位置到指定坐标(x,y)的直线

4、ctx.lineWidth = 1.0

线宽

5、closePath() (可选)

闭合路径之后，图形绘制命令又重新指向到上下文中

6、stroke()  

通过线条来绘制图形轮廓

7、fill()  (可选)

通过填充路径的内容区域生成实心的图形

绘制圆弧

1、arc(x, y, r, startAngle, endAngle, anticlockwise)

以(x, y) 为圆心

以 r 为半径

从 startAngle 弧度开始到endAngle弧度结束

anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

添加样式和颜色

1、fillStyle = color 设置图形的填充颜色

2、strokeStyle = color 设置图形轮廓的颜色


3、lineWidth = 1.0  设置线宽

4、lineCap = type  

设置线条末端样式，共3个值：butt：线段末端以方形结束、round：线段末端以圆形结束、square：线

段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

5、setLineDash([20, 5]); // [实线长度, 间隙长度] 

   ctx.lineDashOffset = -0;

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式 lineDashOffset属性设置起始偏移量。


注意：该属性需要设置在fillRect、strokeRect前才会生效。

绘制文本

1、fillText(text, x, y [, maxWidth]) 

在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

2、strokeText(text, x, y [, maxWidth]) 

在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

3、font = value 

默认的字体是 10px sans-serif。

4、textAlign = value 

可选的值包括：start, end, left, right or center。 默认值是 start。

5、textBaseline = value 

可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是alphabetic。

6、direction = value 

文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

绘制图片

let img = new Image();   // 创建img元素

img.onload = function(){
    ctx.drawImage(img, 0, 0)
}

img.src = 'https://fanyi-cdn.cdn.bcebos.com/static/cat/asset/logo.b10defd4.png';


1、drawImage(image, x, y, width, height)

width 和 height，这两个参数用来控制 当像 canvas 画入时应该缩放的大小.

状态保存和恢复
变形
合成
裁剪路径
requestAnimationFrame

requestAnimationFrame() 会在浏览器的下一次重绘时自动执行回调函数，从而提供更平滑的动画效果。