HTML5 Canvas基本绘制线条教程

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()。

代码：

var clock=document.getElementById("clock")

var cxt=clock.getContext("2d")

function drawNow(){

var now=new Date()

var hour=now.getHours()

var min=now.getMinutes()

var sec=now.getSeconds()

hour=hour>12?hour-12:hour

hour=hour+min/60

//表盘(蓝色)

cxt.lineWidth=10

cxt.strokeStyle="blue"

cxt.beginPath()

cxt.arc(250,250,200,0,360,false)

cxt.closePath()

cxt.stroke()

//刻度

//时刻度

for(var i=0i<12i++){

cxt.save()

cxt.lineWidth=7

cxt.strokeStyle="black"

cxt.translate(250,250)

cxt.rotate(i*30*Math.PI/180)//旋转角度 角度*Math.PI/180=弧度

cxt.beginPath()

cxt.moveTo(0,-170)

cxt.lineTo(0,-190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//分刻度

for(var i=0i<60i++){

cxt.save()

//设置分刻度的粗细

cxt.lineWidth=5

//重置画布原点

cxt.translate(250,250)

//设置旋转角度

cxt.rotate(i*6*Math.PI/180)

//画分针刻度

cxt.strokeStyle="black"

cxt.beginPath()

cxt.moveTo(0,-180)

cxt.lineTo(0,-190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//时针

cxt.save()

// 设置时针风格

cxt.lineWidth=7

cxt.strokeStyle="black"

cxt.translate(250,250)

cxt.rotate(hour*30*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-140)

cxt.lineTo(0,10)

cxt.closePath()

cxt.stroke()

cxt.restore()

//分针

cxt.save()

cxt.lineWidth=5

cxt.strokeStyle="black"

//设置异次元空间分针画布的中心

cxt.translate(250,250)

cxt.rotate(min*6*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-160)

cxt.lineTo(0,15)

cxt.closePath()

cxt.stroke()

cxt.restore()

//秒针

cxt.save()

//设置秒针的风格

//颜色:红色

cxt.strokeStyle="red"

cxt.lineWidth=3

//重置原点

cxt.translate(250,250)

//设置角度

//cxt.rotate(330*Math.PI/180)

cxt.rotate(sec*6*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-170)

cxt.lineTo(0,20)

cxt.closePath()

cxt.stroke()

//画出时针,分针,秒针的交叉点

cxt.beginPath()

cxt.arc(0,0,5,0,360,false)

cxt.closePath()

//设置填充

cxt.fillStyle="gray"

cxt.fill()

//cxt.strokeStyle="red"

cxt.stroke()

//画出秒针的小圆点

cxt.beginPath()

cxt.arc(0,-140,5,0,360,false)

cxt.closePath()

//设置填充

cxt.fillStyle="gray"

cxt.fill()

//cxt.strokeStyle="red"

cxt.stroke()</p>

<p> cxt.restore()</p>

<p>}

function drawClock(){

cxt.clearRect(0,0,500,500)

drawNow()

}

drawNow()

setInterval(drawClock,1000)

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>绘制图表</title>

</head>

<body>

<div id="result-stub" class="well hidden">

<canvas id="canvas" width="345" height="345">

<p>你的浏览器不支持canvas元素</p>

</canvas>

</div>

<script>

//   1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。

var

canvas = document.getElementById('canvas'),

context = null

context = canvas.getContext('2d')

var img = new Image()

img.src ='chart-background.png'//这里是一张具有图表背景的图片

//    2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。

img.onload = function() {

//绘制图片

context.drawImage(img, 0, 0)

//绘制直线

context.beginPath()

context.moveTo(70, 105)

context.lineTo(105, 132)

context.lineTo(142, 250)

context.lineTo(176, 175)

context.lineTo(212, 145)

context.lineTo(245, 197)

context.lineTo(280, 90)

context.stroke()

}

</script>

<script src="jquery.js"></script>

</body>

</html>

3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。

---