canvas介绍及简单使用

一、canvas简介

什么是canvas
canvas 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

Canvas基本使用
注意：部分浏览器较低的版本不支持canvas画布（尤其是IE9之前的IE浏览器）
支持canvas的浏览器会只渲染canvas标签，而忽略其中的替代内容。不支持 canvas的浏览器则 会直接渲染替代内容。
于是就有用文本替换

<canvas>
    你的浏览器不支持canvas,请升级你的浏览器
</canvas>

<canvas id="huabu" width="400" height="400"></canvas>

这样就形成了一个简单的canvas画布

二、 Canvas的简单使用

1. 画一个简单的圆形

	   <canvas id="roundness" width="600" height="300">
       </canvas>

       var canvas = document.getElementById("roundness");
       var context = canvas.getContext("2d");
       context.strokeStyle = "red";//圆形的颜色
       context.lineWidth = "2";
       context.beginPath();
       context.arc(100,100,40,0,2*Math.PI);  //40此值设置圆形的大小
		context.stroke();

三、绘制路径(path)

图形的基本元素是路径（路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。）。

​ 步骤

1. 创建路径起始点
2. 调用绘制方法去绘制出路径
3. 把路径封闭
4. 一旦路径生成，通过描边或填充路径区域来渲染图形。

• beginPath()
• 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
• moveTo(x, y)
• 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
• closePath()
• 闭合路径之后，图形绘制命令又重新指向到上下文中
• stroke()
• 通过线条来绘制图形轮廓
• fill()
• 通过填充路径的内容区域生成实心的图形

function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath(); //新建一条path
    ctx.moveTo(50, 50); //把画笔移动到指定的坐标
    ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
    //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
    ctx.closePath();
    ctx.stroke(); //绘制路径。
}
draw();

canvas有很多的API如想细细研究可以参考网站

https://www.canvasapi.cn/