HTML5中的Canvas路径

标签：style   blog   http   ar   color   os   sp   on   log   

画图也就是我们拿着笔在一张白纸上画图片一样，区别在与这支笔变成了canvas了。

我们平时画图想到什么画什么，可以涂鸦随便怎么样，那么可以开始了。

画图需要白纸吧，于是：（一些基本的用法我就不介绍了）

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

这个就是了。了。有了白纸就要有拿起笔吧，那么：

var canvas=document.getElementById("canvas"),
context = canvas.getContext("2d");

既然画图那么我们就要有想法画什么？有闭合的不闭合的复杂的简单的等等，本章就是介绍路径，那么我就简单的了。

cxt.beginPath();开始绘制

当我们落笔的时候，首先不是产生一个点吧，于是就有了：

moveTo（x，y）；这个方法就是落笔点了。

笔滑动的时候不就产生路径了，但总有终点吧，也就是一个点，于是有了：

context.lineTo(150, 10);这个方法就是落笔终点了。

但是我们用的canvas呀，于是需要一个显示：

context.stroke();这就是描边了

context.fill();这就是填充了，这个我以前的博客有提过填充原理可以去看看。网址：http://www.cnblogs.com/jristy/p/4069987.html

如果要闭合的就需要调用：

context.closePath();

  如果您发现这篇文章的内容误导人或者违法了相关法律，请给我留言。菜鸟在此，不多说了

HTML5中的Canvas路径

标签：style   blog   http   ar   color   os   sp   on   log   

原文地址：http://www.cnblogs.com/jristy/p/4164382.html