canvas绘图的初步学习

2016-06-17 本文已影响0人张九九九

什么是canvas绘图

<canvas>元素负责在页面中设定一个区域，然后通过JavaSaript动态的在这个区域绘制图案。

基本用法

使用canvas元素，先设置其width和height属性，指定绘图区域的大小。标签中的信息在高级浏览器中是不显示的。
<canvas id="myCanvas" width="1000" height="1000">看到此信息，说明你的浏览器太垃圾啦</canvas>
JS中先获取canvas元素，在获取绘图上下文，这里发现一个问题，此脚本必须放在body中，否则会出现错Uncaught TypeError: Cannot read property 'getContext' of null错误。
获取canvas节点
var drawing = document.getElementById("myCanvas");
获取绘图上下文
var context = drawing.getContext("2d");

2D上下文

canvas绘图中的所有位置信息都取决于坐标原点的位置，在未设置坐标原点的情况下，原点坐标为（0，0），也就是canvas的右上角。但可以改变坐标原点的位置，后面详细讲述。
使用2D上下文提供的方法可以回执简单的2D图形，其基本的绘图操作就是填充fill和描边stroke ,操作的结果取决于两个属性：fillStyle和strokeStyle,这两个属性可以是字符串，渐变对象和模式对象，阈值是#fff。

绘制矩形

矩形是唯一一个可以在2D上下文中绘制的形状，其他形状都需要在路径中绘制。与矩形有关的操作有fillRect(),strokeRect(),clearRect()。三种方法都能接受四个参数（x坐标，y坐标，矩形宽，矩形高）。

绘制路径

通过绘制路径可以画出更为复杂的形状和线条。首先，绘制路径必须调用beginPath()方法，表示绘制新的路径，之后可以调用closePath()表示路径绘制结束，此时可以调用stroke()或者fill()来对路进行描边或者填充。还可以调用clip()方法可以再路径上创建一个剪切区域。
arc（x, y, radius, startAngle, endAngle,绘制方向） 绘制方向为布尔值，false代表顺时针，true代表逆时针。
arcTo( x1,y1, x2, y2, radius)绘制一段曲线从（x1,y1）到（x2,y2）。
lineTo(x, y)从游标所在的地方绘制直线到（x，y）。
moveTo(x, y)将游标移动到指定位置。
rect(x,y ,width, height)从指定点开始绘制矩形，此方法绘制的是矩形路径。
需注意的是，路径绘制的关键是绘图游标的位置，每段路径会直结束都需要注意游标的位置，徐调用moveTo()方法将游标移动到指定的位置。

绘制文本

2D绘图上下文提供了两种绘制文本的方法fillText()和strokeText()。接受三个参数（要绘制的字符串，x，y）。两种方法都有一下三个属性：
font：表示文本样式，大小和字体图

textAlign文本水平对齐方式，可选start end left right center。推荐strat和end。

textBaseline表示文本的基线，可以理解为垂直对齐方式。可选的top ，hanging，middle， alphabetic， idographic， bottom；

变换

变换提供以下几种方法
rotate(i)围绕原点旋转i弧度
scale(x,y)缩放
translate(x,y)把坐标移动到（x，y），之后坐标原点会变为原来的(x,y)。

注意，变换会影响下面路径的属性，也就是说在上面执行变换之后，变换的效果会使下面路径发生变化。此时引入两种方法解决此问题。save()和restore()，调用save()之后，上面的属性和变换的组合会妥善保管（1），然后可以对上下文进行其他修改（2）。之后想可调用restore()方法，返回之前保存的设置。这样的好处是，不管（2）中如何进行变换，都不会影响之后的路径状态。save()和restore()总是成对出现的。