html5中如何绘制基本

html5中是怎么实现绘制图形？

html5中可以实现绘画图形的功能，需要注意的是html5只提供2D，不提供3D绘画功能。canvas元素是H5总新增的元素，它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”，我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形，实际上在H5完成绘画功能，不仅仅需要canvas元素，而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。

html5中的canvas元素

canvas元素必须要指定id、width（宽）、height（高）属性，虽然canvas元素是H5中用来绘制的图形，但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。

html5中的常用的绘制图形

绘制矩形

创建canvas元素→取得上下文（使用canvas对象的getcontent方法获得上下文）→填充绘制边框→设定样式→指定线宽、颜色。代码如下图：

可以用clearRect方法擦除指定区域的图形，使矩形区域颜色变透明，context.clearRect(x,y,width,height)。

绘制圆形

绘制圆形要比矩形复杂一点，需要使用到路径，创建图形路径→关闭路径→调用绘制方法、路径。代码如下：

cxt.beginPath()是开始创建路径，有几次是循环创建路径，每次开始都需要调用beginPath()函数。

cxt.arc(70,18,15,0,Math.PI*2,true)是是创建路径，使用了arc（）方法，它的语法如下：

cxt.closePath()cxt.fill()关闭绘画路径后调用绘制路径。

HTML5 Canvas基本绘制线条教程

怎么画线条？和现实中画画差不多：

1.移动画笔，使画笔移动至绘画的开始处

2.确定第一笔的停止点

3.规划好之后，选择画笔（包括画笔的粗细和颜色等）

4.确定绘制

因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。

1.移动画笔(moveTo())

之前我们获得了画笔context，所以以此为例，给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点（单位是px）。记住，这里是以canvas画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。

2.笔画停点(lineTo())

同理，context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚，这里的moveTo()``lineTo()都只是状态而已，是规划，是我准备要画，还没有开始画，只是一个计划而已！

3.选择画笔

这里我们暂且只设置一下画笔的颜色和粗细。

context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为10px。

context.strokeStyle = "#AA394C"，这句话的意思是设置画笔(线条)的颜色为玫红色。

因为Canvas是基于状态的绘制，所以我们在选择画笔粗细和颜色的同时，其实也是选择了线条的粗细和颜色。

4.确定绘制

确定绘制只有两种方法，fill()和stroke()，有点绘画基础的应该知道，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码context.stroke()即可。

画一个线条

不就一条线段吗！废话了这么多！那我们就开始画吧。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

我还标注了一个页面解析图，供大家参考。

这里我将原本

标签中的width和height去掉了，但在JavaScript代码中设置了canvas对象的width和height的属性。

小结：要设置画布的大小，只有这两种方法

1.在标签中设置；

2.在JS代码中设置canvas的'属性.

怎么样，是不是非常的酷。接下来我们要加快脚步了，绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢？别看这只是简简单单的一条线段，这一画只是我们的一小步，但却是人类的一大步！

绘制折线

上面我们已经成功绘制了一条线段。那么，如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢？

聪明的小伙伴肯定已经想到了，这还不简单，复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

绘制多条折线

那同理，我们要绘制多条样式各不相同的折线怎么办呢？比如我们在这里画三条折线，分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了，这还不简单，只需要平移一下再改下画笔颜色就行了。代码格式都一样的，复制就可以了。代码如下。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

咦？是不是很奇怪？说好的先红色，再蓝色，再黑色呢？怎么全是黑色了？其实，这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。

什么意思呢？其实这段代码每次使用stroke()时，它都会把之前设置的状态再绘制一遍。第一次stroke()时，绘制一条红色的折线；第二次stroke()时，会再重新绘制之前的那条红色的折线，但是这个时候的画笔已经被更换成蓝色的了，所以画出的折线全是蓝色的。换言之，strokeStyle属性被覆盖了。同理，第三次绘制的时候，画笔颜色是最后的黑色，所以会重新绘制三条黑色的折线。所以，这里看到的三条折线，其实绘制了3次，一共绘制了6条折线。

那么，我想绘制三条折线，难道就没有办法了吗？艺术家之魂到此为止了么？没救了么？不，还有办法。

使用beginPath()开始绘制

为了让绘制方法不重复绘制，我们可以在每次绘制之前加上beginPath()，代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

可以看到，这里得到了我们预想的结果。因为使用了beginPath()，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点，它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath()，至于closePath()之后会讲到。

所以我们每次开始绘制前都务必要使用beginPath()，为了代码的完整性，建议大家在每次绘制结束后使用closePath()。

什么是 Canvas?

HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas>标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas>元素来绘制.

注意: 默认情况下 <canvas>元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas>元素.

使用 style 属性来添加边框:

实例

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000">

</canvas>

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

实例

var c=document.getElementById("myCanvas")

var ctx=c.getContext("2d")

ctx.fillStyle="#FF0000"

ctx.fillRect(0,0,150,75)

例解析:

首先，找到 <canvas>元素:

var c=document.getElementById("myCanvas")

然后，创建 context 对象：

var ctx=c.getContext("2d")

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000"

ctx.fillRect(0,0,150,75)

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

坐标实例

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

X

Y

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

实例

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

JavaScript:

var c=document.getElementById("myCanvas")

var ctx=c.getContext("2d")

ctx.moveTo(0,0)

ctx.lineTo(200,100)

ctx.stroke()

尝试一下 »

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

实例

使用 arc() 方法 绘制一个圆:

JavaScript:

var c=document.getElementById("myCanvas")

var ctx=c.getContext("2d")

ctx.beginPath()

ctx.arc(95,50,40,0,2*Math.PI)

ctx.stroke()

---