HTML5 Canvas
Canvas ，HTML 5中引入它，可以做很多事情：画图、动画、游戏开发等等。本篇就主要讲解一下Canvas的基本作图。
内容摘要
1、Canvas 基础知识
1.1 Canvas 元素
Canvas 中文翻译为：画布。
<canvas id=”yourCanvasId” width=”300” height=”150” />
Canvas元素除了公用属性外，只有两个额外的属性：width, height,他们都是没有单位的，其实单位是px，但是不能写单位。如果不指定这两个属性，默认是width为300，height为150。
众所周知，html元素的样式，都可以用css样式来指定。Canvas也不例外。
| <html> <head> <title>Canvas - 01</title> <style> body{ background:#dddddd; } #canvas{ margin:20px; padding:20px; background:#ffffff; border:thin inset #aaaaaa; width:600px; height:300px; } </style> </head> <body> <canvas id="canvas"> Canvas not supported </canvas> <script type="text/java script"> var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); ctx.font='38pt Arial'; ctx.fillStyle='cornflowerblue'; ctx.strokeStyle='blue'; ctx.fillText("Hello Canvas", canvas.width/2 -150, canvas.height/2 + 15); ctx.strokeText("Hello Canvas stroke", canvas.width/2 -200, canvas.height/2 + 80); </script> </body> </html> |
我们期望的结果是这样的：
而实际的执行结果：
从执行结果看，它确实一个放大的hello，这是为什么呢？
其实我认为可以这样理解它，它是一个放映布，因为真正的绘图不在它上的，而是在一个绘图板上，绘图完毕投影到放映布上。这一点，类似于我们中学时候用过的幻灯片放映机，在一张玻璃板（绘图板）上写上习题，然后投影到放映布或者白墙上（画布）。
所以呢，这样一想，就明白了，当css样式中的width,height属性值与canvas元素的width,height的属性值不同时，会自动的将绘图板上的内容进行缩放到画布上。
Canvas 元素目前有三个方法：
通过getContext(“2d”);能够取得CanvasRenderingContext2D对象，然后就可以基于此上下文对象来作2d图了
通过getContext(“3d”);就可以进行3d作图，3d作图底层用的是WebGL。
1.2 CanvasRenderingContext2D简介
2、基本作图
2.1、线条
使用Canvas作图时，默认情况下是有这样一个坐标轴的：
在使用canvas作图时，需要按照一定的顺序来编写代码。
1）直线（Line）
要画一条线，代码编写过程一般是这样的：
Ctx.beginPath(); // 声明要开始一条线
Ctx.moveTo(x,y);// 指定线的起点。moveTo，就像是将画笔移动到某个点。
Ctx.lineTo(x,y);// 指定线的终点
Ctx.lineCap=”round”;// 设置线的两端（线帽），可选值有：butt,round,square。
Ctx.lineWidth=15;// 指定线的宽度
Ctx.strokeStyle=”#ff0000”;// 设置线的颜色，不设置则根据当前颜色。默认是黑色。
Ctx.stroke(); // 开始描边
2）曲线（Curves）
使用canvas可以做的曲线主要包括：圆弧、bezier曲线、quadratic曲线。
2.1) 圆弧（arc）
要做一条圆弧，编码的顺序一般是这样的：
Ctx.beginPath(); // 声明要开始一条新的path。
Ctx.arc(x,y,radius,startAngle,endAngle,antiClockwise); //指定弧线path
Ctx.lineWidth=15;// 指定线的宽度
Ctx.strokeStyle=’black’; // 指定线的颜色
Ctx.lineCap=”square”;// 指定线帽
Ctx.stroke();// 开始描边
在做圆弧时，最主要的就是ctx.arc。
该方法的参数列表：
| 参数 |
描述 |
| x |
圆的中心的 x 坐标。 |
| y |
圆的中心的 y 坐标。 |
| r |
圆的半径。 |
| startAngle |
起点的弧值。（弧的圆形的三点钟位置是 0 度）。 |
| endAngle |
终点的弧值。 |
| antiClockwise |
是否逆时针绘图，可选。False = 顺时针，true = 逆时针。 |
这里用的是弧度，不是角度。可能大家对角度都比较熟悉。
从起点，按照顺时针（或者逆时针）方向转一周，是360度（角度）。
如果以弧度来表示，则是按照顺时针（或者逆时针）方向转一周，弧度是 2*PI。
既然这里要求的是弧度值，大家熟悉的是角度，那么怎么将角度转换为弧度呢？
假定 f(x) =>