Canvas简明教程（完整源码）

博客停更大半年，趁着圣诞更新了个人主页，顺便推一篇很乱的文章上来哈哈哈哈哈哈哈！！！

主页效果：anxpp.com

原文出处：http://blog.anxpp.com/index.php/archives/1094/

原文出处：http://blog.youkuaiyun.com/anxpp/article/details/78890819

By anxpp

Canvas简明教程

<canvas> 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

本例包含个人主页全部源码。

浏览器兼容：

元素	chrome	IE	firefox	Safari
Canvas	4.0+	9.0+	2.0+	3.1+

Canvas 能干什么

• 图表
• 小游戏
• 活动页
• 特效
• 背景等

获取 Canvas 对象

方法：
- canvas.getContext(contextType, contextAttributes);

通常我们在创建好一个 Canvas 标签的时候，我们要做的第一步就是要先获取到这个 Canvas 的上下文昌对象。

上下文类型（contextType）：
- 2d（本小册所有的示例都是 2d 的）：代表一个二维渲染上下文
- webgl（或”experimental-webgl”）：代表一个三维渲染上下文
- webgl2（或”experimental-webgl2”）：代表一个三维渲染上下文；这种情况下只能在浏览器实现 WebGL 版本2 (OpenGL ES 3.0)。

绘制路径

请结合源码查看效果

方法列表

熟悉有些什么方法，能做什么即可

方法	描述
fill()	填充路径
stroke()	描边
arc()	创建圆弧
rect()	创建矩形
fillRect()	绘制矩形路径区域
strokeRect()	绘制矩形路径描边
clearRect()	在给定的矩形内清除指定的像素
arcTo()	创建两切线之间的弧/曲线
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
closePath()	创建从当前点回到起始点的路径
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次方贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

方法介绍

该部分可以跳过，当参考手册即可。

arc() 方法：创建弧/曲线（用于创建圆或部分圆）

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

• x:圆的中心的 x 坐标。
• y:圆的中心的 y 坐标。
• r:圆的半径
• sAngle:起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
• eAngle:结束角，以弧度计。
• counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

moveTo(x,y)：把路径移动到画布中的指定点，不创建线条

lineTo(x,y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条

样式：
- lineCap | 设置或返回线条的结束端点样式
- lineJoin | 设置或返回两条线相交时，所创建的拐角类型
- lineWidth | 设置或返回当前的线条宽度
- miterLimit | 设置或返回最大斜接长度

fillRect(x,y,width,heighr)：绘制一个实心矩形

strokeRect(x,y,width,height)：绘制一个空心矩形

画一个点

    var canvas4 = document.getElementById("canvas4");
    var context4 = canvas4.getContext("2d");
    canvas4.width = 400;
    canvas4.height = 400;
    context4.beginPath();
    context4.arc(100, 100, 1, 0, Math.PI * 2, true);
    context4.closePath();
    context4.fillStyle = 'rgb(255,255,255)';
    context4.fill();

绘制弧/曲线

    var canvas5 = document.getElementById("canvas5");
    var context5 = canvas5.getContext("2d");
    canvas5.width = 400;
    canvas5.height = 400;
    context5.beginPath();
    context5.arc(100, 100, 50, 0, Math.PI * 0.5, false);
    context5.strokeStyle = "white";
    context5.stroke();

绘制线条

• 直线：

    var canvas6 = document.getElementById("canvas6");
    var context6 = canvas6.getContext("2d");
    canvas6.width = 400;
    canvas6.height = 400;
    context6.beginPath();
    context6.moveTo(50,50);
    context6.lineTo(100,100);
    context6.strokeStyle = '#fff';
    context6.stroke();

• 折线：

    var canvas7 = document.getElementById("canvas7");
    var context7 = canvas7.getContext("2d");
    canvas7.width = 400;
    canvas7.height = 400;
    context7.beginPath();
    context7.lineTo(200, 200);
    context7.lineTo(200, 100);
    context7.lineTo(100, 50);
    context7.strokeStyle = '#fff';
    context7.stroke();

• 添加样式

    var canvas8 = document.getElementById("canvas8");
    var context8 = canvas8.getContext(&