canvas web api手册

桃扇骨 2022-04-18 06:54 222阅读 0赞

1.**canvas元素**

2.**渲染上下文**

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

3.**检查支持性**

var canvas = document.getElementById('canvas');
    if (canvas.getContext){
      var ctx = canvas.getContext('2d');
      // drawing code here
    } else {
      // canvas-unsupported code here
    }

4.**栅格**  
在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。上面的HTML模板中有个宽150px, 高150px的canvas元素。如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。  
![在这里插入图片描述][20181110001421377.png]  
5.**绘制矩形**

//绘制一个填充的矩形
        fillRect(x, y, width, height)
        //绘制一个矩形的边框
        strokeRect(x, y, width, height)
        //清除指定矩形区域，让清除部分完全透明。
        clearRect(x, y, width, height)

6.**绘制函数**  
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

beginPath()

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

closePath()

通过线条来绘制图形轮廓。

stroke()

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

fill()

将笔触移动到xy点

moveTo(x, y)

绘制一条从当前点到xy点的直线

lineTo(x, y)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆）。从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。  
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。  
arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:  
\**弧度=(Math.PI/180)角度。*

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

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

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

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

7.颜色  
设置图形的填充颜色。

fillStyle = color|gradient|pattern
    color
        DOMString 字符串，被转换成 CSS <color> 颜色值.
    gradient
        CanvasGradient 对象 （线性渐变或者放射性渐变）.
    pattern
        CanvasPattern 对象 （可重复图像）。

设置图形轮廓的颜色。

strokeStyle = color|gradient|pattern

本文参考链接  
[https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas\_API][https_developer.mozilla.org_zh-CN_docs_Web_API_Canvas_API]

[20181110001421377.png]: /images/20220418/dc232a10b2eb4346b2dcf6088988b899.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_Canvas_API]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API