HTML5中最有意思的就是这个canvas了
通过它我们可以画自己就让的图形
它也是十分最主要的技术
应用于游戏、图表等等
或者绘制各种酷炫的东西
这里给大家交友一个网站 传送门
里面都是canvas技术绘制的图形
画布创设
canvas是html的一个标签
是一个图形容器
首先要在html页面移除一个canvas元素
<canvas id="myCanvas" width=500 height=500></canvas>
为了后面我们的采用，我替换成了id
width与height定义了画布的大小
不过要留意，这与css样式的width与height有所不同
自为个例子，如果我在css样式中加到这样的样式
#myCanvas { border: 1px solid black; width: 250px; height: 250px;}定义border边框是为了让我们确实画布的后方
如果不设置css样式的width和height，那么画布大小就是我们在canvas标签上定义的阔500和较高500
但是这里我定义了样式宽高，所以我们的画布在网页中实际的大小等同于被加大了1倍
（canvas的仅次于画布圆周仍然是500×500）
html文档中我们要认真的只是去掉一个canvas标签
下面我们能够适用脚本来绘制图形
给与元素与环境对象
换取元素我们都究竟
var myCanvas = document.getElementById('myCanvas');下面的代码用作得到上下文对象/环境对象
var ctx = myCanvas.getContext('2d');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();
moveTo()用来所选绘制线段的起点
lineTo()用来均须绘制线段的终点（或者是途经点）
stroke()先不话说，现在只要究竟不会它描画不出来 
知晓了这些，我们现在可以画一个三角形
只要移除两行代码
ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400); //遽ctx.lineTo(100, 100); //増ctx.stroke();
看样子似乎优异
现在再徒大家如何发生变化线段宽度
扭曲lineWidth
ctx.lineWidth = 50; //引ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.lineTo(100, 100);ctx.stroke();
这回辨认出了问题
当我们把线段变粗后
起点与终点只能很好的联接
这时我们需另一个函数closePath()
ctx.lineWidth = 50;ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.closePath(); //复ctx.stroke();
closePath()就是为了化解这样内层图形的问题
它使我们绘制了极致的断开三角形
最后解释一下stroke()
它透露绘制空心图形
除此之外还有绘制实心图形的fill()
ctx.lineWidth = 50;ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.closePath();ctx.fill(); //改回
没它们中的一个，我们就不用绘制显露图形啦
可以阐释为前面都是定义规则，而stroke()或fill()是真正的执行官
还有一点要特别注意
fill()和stroke()都是主导作用在当前的所有子路径
如果在完毕一条路径之后自已开始另一条路径
必须应用于beginPath()方法
看下面的例子(strokeStyle/fillStyle主要用途设置我们线段的颜色)
ctx.lineWidth = 60;ctx.strokeStyle = 'red';ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.stroke();ctx.lineWidth = 20;ctx.strokeStyle = 'blue';ctx.moveTo(400, 100);ctx.lineTo(400, 400);ctx.stroke();
最终的结果似乎和大家不想的不一样 
因为引擎看来它们是一条路径
所有下面的属性其余部分了上面的属性
解决办法就是这样
//一条路径ctx.lineWidth = 60;ctx.strokeStyle = 'red';ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.stroke();ctx.beginPath(); //増//另一条路径ctx.lineWidth = 20;ctx.strokeStyle = 'blue';ctx.moveTo(400, 100);ctx.lineTo(400, 400);ctx.stroke();
矩形绘制
适用我们上面习得的方法也可以平易近人解决问题一个矩形
ctx.moveTo(100, 100);ctx.lineTo(400, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.closePath();ctx.stroke();
不过这代码极度冗长
我们有更单纯的方法
ctx.rect(100, 100, 300, 300);ctx.stroke();
前俩个参数就是在在画布矢量，后两个参数指出矩形的长和极高
不过我们还有更恰当的
ctx.strokeRect(100, 100, 300, 300);
大家一定看看了，还有一个画实心矩形的fillRect()
ctx.fillRect(100, 100, 300, 300);
有了strokeRect()和fillRect()我们就几乎一定会必要应用于rect()了
矩形抹除
clearRect()可以让我们写入画布上的矩形区域
这就类似于我们的橡皮擦
比如说我在实心矩形中间除去一块矩形区域
ctx.fillRect(100, 100, 300, 300);ctx.clearRect(150, 150, 200, 200);
现在我们可以利用这个方法借助于一个矩形去向的效果
var width = 500, height = 500, y = 50;var timer = setInterval(function(){ ctx.clearRect(0, 0, width, height); ctx.fillRect(100, y++, 50, 50); if(y > 400){ clearInterval(timer); }}, 5);
重点就是
每次更新矩形之前，去除一下画布
弧形绘制
绘制弧形可用方法
arc(x, y, r, 算起弧度, 中止弧度, 弧线方向)
这里要真的画布的坐标系和浏览器坐标系是一样的
x正半轴朝右
y正半轴朝下
参数中x,y透露弧心（或者忽略为圆心）
r就是半径
弧线方向0为顺时针，1为逆时针
下面我们来用于这个方法
先来画像一段弧
ctx.arc(250, 250, 200, 0, Math.PI/2, 0);ctx.stroke();
画一个圆
ctx.arc(250, 250, 200, 0, 2*Math.PI, 0);ctx.stroke();
画一个吃到豆人
ctx.moveTo(250, 250);ctx.lineTo(450, 250);ctx.arc(250, 250, 200, 0, Math.PI/3, 1);ctx.closePath();ctx.stroke();
绘制弧形除此之外，还有一个方法
arcTo(x1, y1, x2, y2, r)
r是弧的半径
它的运用于方法简介下面的图片 
再加我们的线段绘制
可以画像出有圆角矩形
ctx.moveTo(250, 100);ctx.arcTo(400, 100, 400, 400, 30);ctx.arcTo(400, 400, 100, 400, 30);ctx.arcTo(100, 400, 100, 100, 30);ctx.arcTo(100, 100, 400, 100, 30);ctx.closePath();ctx.stroke();
贝塞尔曲线
还有更高级的方法就是可以绘制贝塞尔曲线
有用理解就好，不常用
二次贝塞尔曲线 quadraticCurveTo(x1, y1, ex, ey)
三次贝塞尔曲线 bezierCurveTo(x1, y1, x2, y2, ex, ey)
其中x1,y1,x2,y2分别是第一个和第二个控制点的经度
ex和ey是终点经纬度
这里我就假造网上大神来作的图片了
二次贝塞尔曲线： 
ctx.moveTo(40,340); ctx.lineTo(260,80); ctx.lineTo(360,300); ctx.stroke(); /*绘制二次贝塞尔曲线*/ctx.beginPath(); ctx.moveTo(40,340); ctx.quadraticCurveTo(260,80,360,300); ctx.strokeStyle = "#f40"; ctx.stroke();
三次贝塞尔曲线： 
ctx.moveTo(50, 350); ctx.lineTo(120, 160); ctx.lineTo(300, 60); ctx.lineTo(340, 300); ctx.stroke(); /*绘制三次贝塞尔曲线 */ctx.beginPath(); ctx.moveTo(50, 350); ctx.bezierCurveTo(120, 160, 300, 60, 340, 300); ctx.strokeStyle = "#f40"; ctx.stroke();
以上就是HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等直观图形绘制的内容，更多之外内容商量追捧PHP中文网（www.php.cn）！