[Head First Html5 Programming notes] Chapter 7 画布

Chapter 7 画布

---

1 <canvas>元素

<canvas id="canvas" width="600" height="200">You need to upgrade the browser</canvas>

1. <canvas>元素在页面中创建画布

2. 通过width和height属性指定画布的宽高，若通过CSS指定则会进行缩放，可能导致图形失真

3. 检验浏览器对<canvas>元素的支持性

   if(canvas.getContext) {
   	//浏览器支持<canvas>元素
   }
   

4. 当浏览器不支持画布时，将显示<canvas>中的内容"You need to upgrade the browser"

2 在<canvas>中绘制矩形

var canvas = document.getElemetById("draw");
var context = canvas.getContext("2d");
context.fillRect(10, 10, 100, 100);

1. canvas.getContext("2d")方法返回2d的context对象，在画布上绘制应先取得context
2. fillRect(x, y, width, height)方法绘制矩形

3 context的fillStyle属性

context.fillStyle = "black";	//指定绘制的颜色，颜色需用""括起

4 在<canvas>中绘制线段

context.beginPath();	//beginPath开始路径
context.moveTo(x,y);	//moveTo移动至起始点
context.lineTo(x,y);	//lineTo生成路径
context.closePath();	//closePath闭合路径（回到起始点）

context.linewidth = 1;
context.stroke();
context.fillStyle = "white";
context.fill();

1. 先生成路径，再填充
2. stroke()绘制路径的边
3. fill()填充路径围成的封闭图形

5 在<canvas>中绘制圆(弧)

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, direction);
//x, y指定圆心，radius指定半径
//startAngle, endAngle指定起始弧度和中止弧度
//direction为绘制方向，true为顺时针，false为逆时针
context.stroke();

1. startAngle, endAngle为相对于x轴的角度，顺时针为正值，逆时针为负值

2. startAngle, endAngle采用弧度制，角度应转换为弧度

   function degreesToRadians(degrees) {
   	return degrees * Math.PI / 180;
   }
   

6 文本

1. 在<canvas>中添加文本

   context.fillText("text", width, x, y);		//实心
   context.strokeText("text", width, x, y);	//空心
   

2. 对齐

   context.textAlign = "start";	//start/end/left/right/center
   

3. 字体

   context.font = "italic bold 1.5em Times,sefif";
   //顺序为：字体样式+粗细+大小+字体族
   

4. 基线

   context.textBaseline = "alphabetic";	//alphabetic/bottom/middle/top
   

   (1) bottom下划线，top上划线，middle中划线

   (2) alphabetic与字母基线对齐，如"alphabetic"中"a"的底部