HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制

HTML5中最有意思的就是这个canvas了 
通过它我们可以画自己想要的图形 
它也是十分重要的技术 
应用于游戏、图表等等 
或者绘制各种酷炫的东西 
这里给大家分享一个网站 传送门 
里面都是canvas技术绘制的图形

画布创建

canvas是html的一个标签 
是一个图形容器 
首先要在html页面添加一个canvas元素

<canvas id="myCanvas" width=500 height=500></canvas>

• 1

• 1

为了后面我们的使用，我添加了id 
width与height定义了画布的大小 
不过要注意，这与css样式的width与height不同 
举个例子，如果我在css样式中添加这样的样式

#myCanvas {
    border: 1px solid black;
    width: 250px;
    height: 250px;
}

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

定义border边框是为了让我们清楚画布的位置 
如果不设置css样式的width和height，那么画布大小就是我们在canvas标签上定义的宽500和高500 
但是这里我定义了样式宽高，所以我们的画布在网页中实际的大小相当于被缩小了1倍 
（canvas的最大画布坐标仍然是500×500）

html文档中我们要做的只是添加一个canvas标签 
下面我们需要使用脚本来绘制图形

获取元素与环境对象

获取元素我们都知道

var myCanvas = document.getElementById('myCanvas');

• 1

• 1

下面的代码用于获取上下文对象/环境对象

var ctx = myCanvas.getContext('2d');

• 1

• 1

getContext用于指定一个绘图环境 
这里我们使用最常用的二维绘图 
使用getContext(‘2d’) 
（getContext(‘webgl’)用于3D绘图） 
获取到的ctx是一个对象（CanvasRenderingContext2D对象） 
用以到处二位绘图API

再通俗的说，canvas元素对象是我们的“画布” 
而通过getContext(‘2d’)获取的环境对象就是我们的“画笔” 
下面我们所有的操作都需要是用“画笔”，也就是这个上下文对象（这里就是变量ctx）

线段绘制

下面我们就来绘制最简单的图形——线段 
现在网页上已经有了一个500×500的画布 
我们先来画一条斜线

ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.stroke();

• 1
• 2
• 3

• 1
• 2
• 3

moveTo()用来指定绘制线段的起点 
lineTo()用来指定绘制线段的终点（或者是途经点） 
stroke()先不说，现在只要知道没有它画不出来 

---

了解了这些，我们现在可以画一个三角形 
只要添加两行代码

ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400); //增
ctx.lineTo(100, 100); //增
ctx.stroke();

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5